Конвертер цвета — онлайн-конвертер HEX, RGB, HSL _

Что такое преобразование цвета?

Каждый цвет, который отрисовывает ваш браузер, в конечном счёте представляет собой триплет sRGB — три числа от 0 до 255 для красного, зелёного и синего каналов плюс необязательная альфа. Спецификация CSS Color Level 4 определяет несколько текстовых форматов, которые круговым обходом сводятся к одному и тому же триплету, а также перцептивно равномерное пространство OKLCH. Этот инструмент читает любой из них, преобразует во все остальные и сообщает коэффициент контраста WCAG 2.1 относительно второго цвета — чтобы вы могли уверенно выпускать доступные интерфейсы.

Как работает преобразование цвета?

Преобразование — это последовательность чётко определённых линейных и нелинейных трансформаций. Каждый шаг выполняется в вашем браузере — ни один ввод не попадает на наши серверы:

1. Ваш ввод разбирается. Инструмент автоматически определяет 3-, 4-, 6- или 8-значный HEX, функциональные формы rgb()/rgba()/hsl()/hsla()/hsv()/hwb() как в устаревшем синтаксисе с запятыми, так и в современном с косой чертой для альфы, либо любой из 150 именованных цветов CSS (включая rebeccapurple).
2. Распознанный цвет нормализуется в канонический sRGB — четыре числа с плавающей точкой {r, g, b, a}, каждое в диапазоне 0–1. Это единый источник истины, из которого выводится каждый выходной формат.
3. HEX получается округлением каждого канала до байтового значения 0–255 и склейкой шестнадцатеричных цифр. RGB / RGBA печатают те же байты. HSL и HSV применяют стандартные алгоритмы W3C для цилиндрических координат; HWB берёт оттенок из HSV, белизну как min(r, g, b), а черноту как 1 - max(r, g, b).
4. CMYK — это грубое приближение: k = 1 - max(r, g, b), затем c, m, y вычисляются из остаточных каналов. Подходит для экранного предпросмотра, но не для печати: настоящий вывод CMYK требует ICC-профиля, который этот инструмент намеренно не включает.
5. OKLCH следует прямому пути css-color-4: sRGB линеаризуется, умножается на матрицу LMS, извлекается кубический корень, результат умножается на матрицу LMS→OKLab и, наконец, прямоугольный OKLab переводится в полярный OKLCH. OKLCH перцептивно равномерно — именно поэтому это правильное пространство для построения палитр, которые выглядят сбалансированно для человеческого глаза.

Зачем использовать этот конвертер цвета?

• Приватность: каждое преобразование выполняется в вашем браузере на чистом JavaScript. Цвет, который вы вставляете, никогда не покидает ваше устройство — это важно для невыпущенных брендовых работ, внутренних дизайн-систем и клиентских макетов под NDA.
• Передача от дизайнера к разработчику: вставьте HEX из Figma и сразу получите строку rgb() для конфига Tailwind, строку hsl() для CSS-переменной или строку oklch() для современной палитры — все форматы в одном месте, без беготни между вкладками.
• Точность WCAG: проверка контраста использует точную формулу относительной яркости WCAG 2.1 и опубликованные пороги AA (4,5 / 3,0) и AAA (7,0 / 4,5) для обычного и крупного текста. Полученный коэффициент совпадает с ручными калькуляторами с точностью до 0,01.
• Тёмный режим и построение палитр: HSL и OKLCH выделяют светлоту как отдельный канал, поэтому легко сдвинуть бренд-цвет вверх или вниз по оси светлоты, чтобы получить согласованные токены для тёмного режима или сгенерировать десятиступенчатую палитру из единственного исходного цвета.

Каковы распространённые применения преобразования цвета?

Преобразование цветов встречается в веб-разработке, дизайне и работе по доступности:

• Дизайн-системы: превращение бренд-HEX в согласованные токены HSL и OKLCH для шкалы CSS-переменных с последующей проверкой, что каждая комбинация токенов проходит WCAG AA относительно фона страницы.
• Аудит доступности: вставьте пару «передний план + фон» с реального экрана продукта и одним взглядом считывайте коэффициент контраста плюс вердикты AA/AAA как для обычного, так и для жирного крупного текста.
• Кросс-инструментальные круговые обходы: вытащили цвет пипеткой из скриншота (HEX), вставили сюда — и копируйте строку hsl() или oklch() прямо в Tailwind, токены Figma или тему CSS-in-JS.

Как выглядит пример преобразования цвета?

Возьмём знаменитый rebeccapurple. Поиск по именованным цветам разрешает его в #663399. Преобразование в RGB даёт rgb(102, 51, 153). Преобразование в HSL даёт hsl(270, 50%, 40%) — фиолетовый оттенок, наполовину насыщенный, на четыре десятых светлый. Проверка этого цвета относительно чистого белого даёт коэффициент около 7,39, что проходит AAA (7,0) для обычного и AAA (4,5) для крупного текста — надёжный и доступный выбор переднего плана. Круговой обход #663399 через RGB → HSL → RGB → HEX возвращает исходную строку точь-в-точь, байт в байт.

Используйте этот конвертер как быстрый справочник по любому цвету, с которым вы сталкиваетесь — в коде, в дизайн-файлах или на скриншоте — а проверку контраста как финальную проверку перед релизом. Всё работает локально, ничего не логируется, а математика преобразований следует опубликованным спецификациям W3C и WCAG — поэтому цифры совпадают с тем, что покажут ваш аудит-инструмент или devtools браузера.