Конвертация цветов
Бесплатный онлайн-конвертер цвета, распознающий HEX (3, 4, 6, 8 цифр), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), новый синтаксис CSS Color 4 (с пробелами), все 147 именованных цветов CSS и любой из них с альфа-каналом. Выводит каждый формат сразу, копируется по отдельности. Встроенная палитра генерирует тёмные шаги, светлые шаги, комплементарные, аналогичные, триадные и тетрадные гармонии. Проверка контраста WCAG показывает, проходит ли цвет AA / AAA на белом и чёрном для обычного и крупного текста. Системная пипетка (Chrome / Edge) — выберите любой цвет с экрана.
Как пользоваться
Любой формат: HEX, RGB, HSL, OKLCH, даже CSS-имена вроде tomato.
Все одиннадцать появляются сразу, копируйте одним кликом.
Тёмные, светлые и гармонии, выведенные из вашего цвета.
WCAG-контраст на белом и чёрном с вердиктом AA/AAA.
Конвертация между 11 форматами цвета, генерация палитр, проверка WCAG-контраста — всё в одном месте
Все форматы
Контраст (WCAG)
Палитра
Недавние
Особенности
Типичные применения
- Узнать OKLCH бренд-HEX для дизайн-системы CSS Color 4.
- Конвертировать RGB-пиксели со скриншота в HSL для оси графика.
- Найти комплементарный цвет для hover-состояния кнопки.
- Проверить, проходит ли основной текст WCAG AA на выбранном фоне.
- Выбрать цвет из другой вкладки или окна системной пипеткой.
Почему именно этот
Многие конвертеры умеют только HEX↔RGB↔HSL. Мы включаем OKLab и OKLCH — новые пространства CSS Color 4, гораздо лучше соответствующие человеческому восприятию, чем HSL (без скачков светлоты при смене оттенка). Генерация палитры идёт в OKLab — шаги выглядят перцептивно равномерно, не математически равномерно. Контраст считается в WCAG 2 в пространстве яркости с явно прописанными порогами 4.5:1 и 3:1.
Частые вопросы
Что такое OKLCH?
Перцептивно-однородное цветовое пространство, представленное в CSS Color 4. В отличие от HSL — где светлота 50% может выглядеть очень по-разному на разных оттенках — светлота OKLCH одинакова по всему спектру, что делает дизайн-токены предсказуемыми. Если вы строите современную дизайн-систему, OKLCH стоит изучить.
Альфа-канал поддерживается?
Да — любой из 8-значного HEX, rgba(), hsla() или альфа-суффикса в пробел-синтаксисе (rgb(255 0 0 / 50%)) парсится и отражается в каждом выходном формате, поддерживающем альфу.
Почему палитра оттенков выглядит «ступенчатой», а не плавной?
Оттенки интерполируются в OKLab и проецируются обратно в целевое пространство, поэтому каждый шаг перцептивно равен — обычно это даёт визуально плавнее, чем наивное изменение HSL-светлоты, но очень тёмные или очень светлые исходные цвета зажимаются у концов.
CMYK — точен для печати?
Нет — выход CMYK это быстрая screen-space конверсия, не ICC-аware. Для печати возьмите CMYK здесь как старт и проверьте в Adobe / Affinity против реального профиля печати.
Пипетка не работает — почему?
EyeDropper API сейчас доступен только в Chromium-браузерах (Chrome, Edge, Brave). Firefox и Safari скрывают кнопку с подсказкой если не поддерживается.
HEX чувствителен к регистру?
Нет, HEX это hex (0-9, a-f или A-F). Мы выводим в нижнем регистре по рекомендации CSS Color 4; вывод остаётся валидным как бы вы его ни вставили.
На мобильном?
Да. Пипетка недоступна в мобильных браузерах — используйте нативный color picker.
Мы можем! И это бесплатно. Просто отправьте нам сообщение с вашим пожеланием. Если хотите обсудить детали — оставьте свою почту, и мы с вами свяжемся. Можно анонимно.
