Конвертер цвета
Перевод цвета между HEX, RGB, HSL и CSS-именами: все представления сразу, ближайшее именованное значение и прозрачность. Подбор оттенка для вёрстки и тем.
Любая запись: #3399ff, rgb(51 153 255),hsl(210 100% 60%) или CSS-имя вроде tomato. Поддерживаются сокращённый hex (#39f), альфа и проценты.
Палитра заменяет ручной ввод: выбранный цвет появляется в поле выше и разбирается так же. «Случайный цвет» — быстрый способ начать с нуля.
Необязательное поле: заполните, если два цвета будут использоваться вместе — например текст этого цвета на фоне того. Тогда ниже появится блок «Контраст WCAG» с коэффициентом и оценками AA/AAA для обычного и крупного текста.
Превью и форматы
- HEX
- HEX с альфой
- RGB
- HSL
- OKLCH
- Ближайшее CSS-имя
Контраст WCAG
- Коэффициент
- Обычный текст
- Крупный текст
AA — обычный текст ≥ 4.5, крупный ≥ 3. AAA — обычный ≥ 7, крупный ≥ 4.5.
Гармонии
Схемы по цветовому кругу с тем же тоном, что базовый. Нажмите на образец — HEX скопируется.
Оттенки и тона
Шкала к белому слева и к чёрному справа, базовый цвет в центре. Нажмите — скопируется HEX.
Как читать
HEX— шестнадцатеричная запись: удобна для конфигов и дизайн-систем. С альфой — 8 цифр (#rrggbbaa).rgb()— каналы 0..255; четвёртое значение — прозрачность 0..1. Хороша для инлайн-стилей.hsl()— оттенок в градусах, насыщенность и яркость в процентах. Удобна для тем: менять яркость проще, чем цифры.- Ближайшее CSS-имя — подсказка: выбирает из 148 стандартных имён по евклидову расстоянию, чтобы было чем назвать оттенок в разговоре.
Последние цвета
Разобранные цвета хранятся в истории этого браузера (localStorage) и попадают в экспорт на странице «Закладки». Цвет — не секрет: в ссылку шеринга он не попадает никогда.
Готовые примеры
Найдено: 5 из 5
- #FF0000 — это красныйОдин и тот же красный во всех форматах: HEX #ff0000, rgb(255 0 0) и hsl(0 100% 50%). Удобно, когда нужен тот же цвет в инлайн-стиле и в теме.
- Небесно-голубой через HSLHSL удобен для тем: насыщенность и яркость править проще, чем шестнадцатеричные цифры. Тул показывает тот же цвет как #36a9f5 и rgb(54 169 245).
- Полупрозрачный чёрныйЗатемнение поверх картинки часто делают чёрным с альфой. Тот же цвет в HEX — #00000080, в RGB — rgba(0 0 0 / 0.5). Альфа никуда не теряется.
- Чёрный #000000Самый тёмный цвет: HEX #000000, rgb(0 0 0) и hsl(0 0% 0%). Точка отсчёта для шкал оттенков и контраста — любой цвет на чёрном фоне проверяется по WCAG.
- Белый #ffffffСамый светлый цвет: HEX #ffffff, rgb(255 255 255) и hsl(0 0% 100%). Точка отсчёта для шкал тонов и контраста — любой цвет на белом фоне проверяется по WCAG.
Что это и как пользоваться
Страница принимает цвет в любом привычном виде — #39f, #3399ff, #3399ffcc, rgb(51 153 255), hsl(210 100% 60%) или CSS-имя вроде tomato — и показывает его одновременно в HEX, HEX с альфой, RGB, HSL и OKLCH.
Короткая запись #39f разворачивается в #3399ff, а восьмизначная #3399ffcc несёт альфу: 255 — полностью непрозрачный, 0 — полностью прозрачный. Незнакомое слово вместо имени цвета считается ошибкой, а не «примерно этим оттенком».
OKLCH здесь не для красоты: он перцептивно равномерный, и одинаковый шаг светлоты в нём выглядит одинаковым шагом для глаза, чего нельзя сказать о HSL, где жёлтый и синий при одной светлоте воспринимаются по-разному.
Второй цвет включает блок контраста: считается отношение яркостей по WCAG и показываются пороги для обычного (4,5:1) и крупного (3:1) текста, то есть страница отвечает на вопрос «читаемо ли это», а не только «какой это код».
Дополнительно строятся гармонии — комплементарная, аналоговая, триада — и шкала оттенков и тонов: восемь шагов в сторону тёмного и светлого.
Когда пригодится
- Перевести цвет из макета в формат, который принимает вёрстка, включая OKLCH для проектов на современных CSS-цветах.
- Проверить пару «текст на фоне» на контраст до того, как макет уйдёт в разработку.
- Подобрать оттенок: сдвинуть светлоту в OKLCH и получить ровную шкалу для темы.
- Узнать, как называется близкий цвет: страница находит ближайшее CSS-имя, но не выдаёт его за точное совпадение.
- Сверить два оттенка одного бренда из разных макетов: сравнить OKLCH и увидеть, насколько они на самом деле различаются.
Чего инструмент не делает
- Палитра не генерируется: гармонии и шкала — производные от одного цвета, а не подбор сочетаний под бренд.
- Ближайшее имя приблизительно: у большинства оттенков своего имени нет, и разница с найденным может быть заметна.
- Альфа переносится не везде одинаково: HSL с прозрачностью и OKLCH с альфой записываются по-разному, и не каждая модель её сохраняет.
- Контраст считается по формуле WCAG 2.x и не заменяет проверку на реальных скриншотах с тенями и градиентами.
Примеры
- Вход
#ff0000- Выход
rgb(255 0 0); hsl(0 100% 50%); red; контраст с белым 4:1- Вход
rgb(0, 128, 0)- Выход
#008000; green; контраст с белым около 5,1:1