Конвертер цветов 🔒 Ваши данные не покидают браузер.
HEX ↔ RGB ↔ HSL с живым предпросмотром и палитрой.
Проверка контраста
Съешь ещё этих мягких французских булок.
Съешь ещё этих мягких французских булок.
Оттенки и осветления
Выберите ступень, чтобы сделать её текущим цветом.
Об этом инструменте
Вставьте цвет в любом CSS-формате — hex (#1e90ff или #19f), rgb(), hsl() или именованный цвет вроде dodgerblue — и получите все форматы с копированием в один клик и живым образцом. HEX экспортируют дизайн-инструменты, RGB нужен canvas и JS API, а HSL удобен людям (тон, насыщенность, светлота).
Конвертация использует собственный CSS-движок браузера: всё, что валидно в стилях, работает здесь. 100% на стороне клиента.
Частые вопросы
Отправляются ли мои данные о цвете куда-либо?
Нет. Все преобразования, проверки контраста и палитры вычисляются локально в вашем браузере — введённые данные никогда не покидают ваше устройство.
В чём разница между HSL и HSV?
Оба описывают тон и насыщенность, но третье значение HSL — светлота (насколько цвет близок к чёрному или белому), а у HSV — значение (насколько близок только к чёрному, оставаясь максимально ярким наверху). HSV чаще встречается в палитрах дизайнерских инструментов, HSL — в соглашениях CSS.
Почему мой hex-код состоит из 8 цифр, а не из 6?
Дополнительная пара кодирует альфа-канал (прозрачность) как #rrggbbaa. Она появляется, только если у входного цвета альфа-канал меньше 1 — полностью непрозрачные цвета остаются 6-значными.
Что означают значки AA и AAA под проверкой контраста?
Это пороги контраста WCAG 2: AA — минимум, которого должно достигать большинство сайтов (4,5:1 для обычного текста, 3:1 для крупного текста или элементов интерфейса), AAA — более строгая цель (7:1 / 4,5:1). Зелёный значок означает, что ваша пара цветов текста и фона проходит этот уровень.
Что такое OKLCH и зачем его использовать вместо HSL?
OKLCH — это перцептивно равномерное цветовое пространство: равные шаги по светлоте или насыщенности выглядят для глаза одинаково различимыми, чего HSL не гарантирует. Он всё чаще используется в современном CSS для построения цветовых шкал и градиентов без неожиданных тёмных или мутных участков.