Конвертер цветов онлайн

Конвертер цветов HEX, RGB и HSL — как это работает

Конвертер цветов — это онлайн-инструмент для мгновенного перевода значений между тремя основными цветовыми моделями, используемыми в веб-разработке и цифровом дизайне: HEX, RGB и HSL. При вводе цвета в любом из этих форматов калькулятор автоматически пересчитывает значение во все остальные представления, отображает живой предпросмотр выбранного цвета, генерирует готовый CSS-код (rgba() и hsl()), а также оценивает контрастность текста по стандарту WCAG 2.1.

Задача перевода цветов возникает ежедневно у фронтенд-разработчиков, UI/UX-дизайнеров, верстальщиков и специалистов по полиграфии. Дизайнер передаёт цвет в HEX-формате из Figma или Adobe XD, а разработчику нужен HSL для создания палитры с вариациями светлоты. Или наоборот: цвет задан в RGB, а для CSS-переменных требуется HEX. Наш калькулятор исключает необходимость ручных вычислений и устраняет ошибки конвертации.

Цветовые модели — подробное описание

RGB (Red, Green, Blue)

RGB — аддитивная цветовая модель, в которой конечный цвет формируется путём смешения трёх основных световых компонентов: красного (Red), зелёного (Green) и синего (Blue). Каждый канал принимает значение от 0 (отсутствие компонента) до 255 (максимальная интенсивность). При нулевых значениях всех каналов получается чёрный цвет, при максимальных — белый. Всего RGB-модель описывает 256 × 256 × 256 = 16 777 216 уникальных цветов (так называемый True Color).

RGB лежит в основе работы мониторов, телевизоров, смартфонов и любых экранов с подсветкой. Каждый пиксель состоит из трёх субпикселей — красного, зелёного и синего, — интенсивность свечения которых определяет видимый цвет. В CSS запись rgb(255, 102, 0) задаёт оранжевый цвет с максимальным красным каналом, средним зелёным и нулевым синим.

HEX (шестнадцатеричная запись)

HEX — это не отдельная цветовая модель, а компактная форма записи RGB-значений в шестнадцатеричной системе счисления. Формат: #RRGGBB, где каждая пара символов (от 00 до FF) представляет десятичное значение канала от 0 до 255. Например, #FF6600 означает R=255 (FF), G=102 (66), B=0 (00). Краткая запись #F60 эквивалентна #FF6600 — каждый символ удваивается.

HEX стал стандартом де-факто в веб-разработке благодаря компактности: 7 символов вместо записи rgb(255, 102, 0). Все CSS-свойства, принимающие цвет (color, background-color, border-color, box-shadow и т. д.), поддерживают HEX-формат. Современные спецификации CSS также поддерживают 8-символьный формат #RRGGBBAA, где последние два символа задают альфа-канал (прозрачность), например #FF660080 — оранжевый с 50% прозрачностью.

HSL (Hue, Saturation, Lightness)

HSL — цветовая модель, описывающая цвет через три параметра, интуитивно понятных человеку. Hue (H) — оттенок, выражается в градусах на цветовом круге от 0° до 360°: 0° = красный, 120° = зелёный, 240° = синий. Saturation (S) — насыщенность от 0% (серый) до 100% (чистый цвет). Lightness (L) — светлота от 0% (чёрный) до 100% (белый), при 50% — чистый цвет.

Главное преимущество HSL — удобство для дизайнеров. Чтобы создать более тёмный вариант цвета, достаточно уменьшить L. Чтобы получить приглушённый оттенок — уменьшить S. Оттенок (H) при этом не меняется, что позволяет легко строить монохроматические и аналоговые палитры. В CSS: hsl(24, 100%, 50%) задаёт оранжевый. Функция hsla() добавляет альфа-канал: hsla(24, 100%, 50%, 0.5).

CMYK (Cyan, Magenta, Yellow, Key)

CMYK — субтрактивная модель, используемая в полиграфии. В отличие от RGB, где смешение даёт белый, в CMYK смешение голубого (Cyan), пурпурного (Magenta) и жёлтого (Yellow) красителей теоретически даёт чёрный, но на практике — тёмно-коричневый. Поэтому добавляется четвёртый канал — чёрный (Key). Каждый компонент измеряется в процентах от 0 до 100.

При переводе из RGB в CMYK неизбежны потери: цветовой охват (gamut) RGB-мониторов шире, чем у типографских красок. Ярко-оранжевый #FF6600 на экране будет выглядеть более приглушённым при печати. Для точного соответствия цветов используются системы управления цветом (CMS) и ICC-профили конкретного оборудования. Наш конвертер работает с экранными моделями (HEX, RGB, HSL), которые наиболее востребованы в веб-разработке.

Формулы конвертации цветов

HEX → RGB

Перевод из HEX в RGB — это простое преобразование системы счисления. Каждая пара символов HEX-кода переводится в десятичное число. Для символа A=10, B=11, C=12, D=13, E=14, F=15. Формула: R = 16 × первый_символ + второй_символ. Например, для #FF6600: R = 16 × 15 + 15 = 255, G = 16 × 6 + 6 = 102, B = 16 × 0 + 0 = 0.

RGB → HSL

Перевод из RGB в HSL выполняется по следующему алгоритму. Нормализуйте значения R, G, B делением на 255 (получатся числа от 0 до 1). Найдите максимум (M) и минимум (m). Светлота: L = (M + m) / 2. Если M = m, цвет ахроматический (серый), H = 0, S = 0. Иначе насыщенность: S = (M − m) / (1 − |2L − 1|). Оттенок вычисляется в зависимости от того, какой канал максимальный: если R — H = 60° × ((G − B) / (M − m) mod 6), если G — H = 60° × ((B − R) / (M − m) + 2), если B — H = 60° × ((R − G) / (M − m) + 4).

HSL → RGB

Обратное преобразование использует вспомогательные величины. Вычислите C = (1 − |2L − 1|) × S (chroma), X = C × (1 − |(H / 60°) mod 2 − 1|), m = L − C / 2. В зависимости от сектора оттенка (каждые 60°) определяются промежуточные RGB-значения, к которым прибавляется m и умножается на 255. Результат округляется до целого числа.

Использование цветов в CSS

Современный CSS предлагает несколько способов задания цвета. Каждый имеет свои преимущества в зависимости от задачи.

Именованные цвета

CSS определяет 148 именованных цветов: red, blue, green, orange, coral, tomato, gold и другие. Они удобны для прототипирования, но ограничены по количеству и не позволяют задать произвольный оттенок. Полный список определён в спецификации CSS Color Level 4.

HEX-запись в CSS

Наиболее распространённый формат: color: #FF6600; или сокращённый color: #F60;. Поддерживается всеми браузерами начиная с CSS 1. Современный вариант с альфа-каналом: color: #FF660080; (CSS Color Level 4, поддержка > 97% браузеров по данным caniuse.com на 2026 год).

Функция rgb() и rgba()

Функция rgb(255, 102, 0) задаёт цвет тремя десятичными значениями каналов. Вариант rgba(255, 102, 0, 0.5) добавляет альфа-канал (прозрачность) от 0 (полностью прозрачный) до 1 (полностью непрозрачный). В CSS Color Level 4 синтаксис упрощён: rgb(255 102 0 / 50%) — запятые и отдельная функция rgba() больше не обязательны, хотя старый синтаксис по-прежнему работает.

Функция hsl() и hsla()

Функция hsl(24, 100%, 50%) задаёт цвет через оттенок (угол), насыщенность и светлоту. Это самый удобный формат для работы с палитрами: чтобы создать hover-эффект, достаточно изменить светлоту на 10%. Например: --brand: hsl(24, 100%, 50%); --brand-hover: hsl(24, 100%, 40%);. В CSS Custom Properties (переменных) HSL даёт максимальную гибкость.

Современные форматы: oklch() и oklab()

CSS Color Level 4 вводит новые цветовые пространства: oklch(L C H) и oklab(L a b), основанные на перцептуально-однородных моделях. В oklch() L — воспринимаемая яркость (0–1), C — хрома (насыщенность), H — оттенок в градусах. Преимущество oklch() перед hsl(): равные изменения L воспринимаются глазом как равные изменения яркости, тогда как в HSL L=50% для жёлтого и синего визуально сильно отличаются. Поддержка oklch() в браузерах — > 90% на 2026 год.

Теория цвета и цветовой круг

Цветовой круг — фундаментальный инструмент теории цвета, впервые описанный Исааком Ньютоном в 1666 году. Современный цветовой круг основан на трёх первичных цветах (красный, жёлтый, синий в субтрактивной модели или красный, зелёный, синий в аддитивной), трёх вторичных (оранжевый, зелёный, фиолетовый) и шести третичных.

Цветовые гармонии

Существуют проверенные схемы сочетания цветов, основанные на геометрических соотношениях на цветовом круге:

• Комплементарная (дополнительная): два цвета, расположенные напротив друг друга (разница H = 180°). Пример: оранжевый (24°) и синий (204°). Создаёт максимальный контраст.
• Аналоговая: 2–4 соседних цвета (разница H = 20–40°). Пример: жёлтый (60°), жёлто-зелёный (80°), зелёный (120°). Создаёт гармоничную, спокойную палитру.
• Триадная: три цвета с шагом 120°. Пример: красный (0°), зелёный (120°), синий (240°). Яркая, динамичная палитра.
• Расщеплённо-комплементарная: базовый цвет + два соседа его дополнительного. Менее контрастная, чем комплементарная, но более разнообразная.
• Тетрадная (прямоугольная): четыре цвета, образующие прямоугольник на круге. Наиболее сложная для балансировки.

Тёплые и холодные цвета

Цветовой круг условно делится на две половины: тёплые цвета (красный, оранжевый, жёлтый — H от 0° до 60° и от 330° до 360°) ассоциируются с огнём и солнцем; холодные (зелёный, синий, фиолетовый — H от 150° до 270°) — с водой и льдом. Тёплые цвета визуально приближают элементы, холодные — отдаляют. Это используется в дизайне интерфейсов: кнопки CTA часто делают тёплыми (оранжевый, красный), а фоны — холодными (синий, серо-голубой).

Доступность и контрастность цветов (WCAG)

Стандарт WCAG (Web Content Accessibility Guidelines) устанавливает требования к контрастности цветов для обеспечения читаемости текста людьми с нарушениями зрения. Текущая версия — WCAG 2.1, Level AA требует минимального коэффициента контрастности 4.5:1 для обычного текста и 3:1 для крупного (от 18pt или 14pt bold). Level AAA — 7:1 и 4.5:1 соответственно.

Коэффициент контрастности рассчитывается по формуле: CR = (L1 + 0.05) / (L2 + 0.05), где L1 — относительная яркость более светлого цвета, L2 — более тёмного. Относительная яркость (relative luminance) вычисляется по формуле: L = 0.2126 × R' + 0.7152 × G' + 0.0722 × B', где R', G', B' — линеаризованные значения каналов (с учётом гамма-коррекции sRGB). Наш конвертер автоматически вычисляет контрастность выбранного цвета на белом и чёрном фоне.

Практические рекомендации: серый текст на белом фоне должен быть не светлее #767676 (контраст 4.54:1). Для ссылок на сером фоне рекомендуется подчёркивание, а не только цвет, так как около 8% мужчин и 0.5% женщин имеют дефицит цветового зрения (дальтонизм).

Применение конвертера цветов в веб-разработке

Конвертер цветов — незаменимый инструмент в повседневной работе фронтенд-разработчика и дизайнера. Рассмотрим типичные сценарии использования.

Перенос из дизайн-макета в код

Figma, Sketch и Adobe XD по умолчанию показывают цвета в HEX. При вставке в CSS иногда нужен другой формат: HSL для построения палитр через CSS-переменные, rgba() для наложений с прозрачностью, или oklch() для перцептуально-однородных переходов. Конвертер позволяет мгновенно получить нужный формат и скопировать его одним кликом.

Создание дизайн-токенов

В современных дизайн-системах цвета определяются как токены (переменные). Базовый цвет бренда задаётся в HSL, а варианты генерируются изменением L: --brand-50: hsl(24, 100%, 95%); --brand-100: hsl(24, 100%, 85%); ...; --brand-900: hsl(24, 100%, 15%). Конвертер помогает найти начальные значения H, S и L для любого HEX-цвета бренда.

Проверка доступности

Перед финальной вёрсткой дизайнер должен убедиться, что все текстовые элементы соответствуют WCAG AA. Конвертер моментально показывает контрастность выбранного цвета на белом и чёрном фоне, позволяя быстро скорректировать светлоту (L в HSL) до прохождения порога 4.5:1.

Работа с градиентами и анимациями

При создании CSS-градиентов в HEX или RGB переходы между некоторыми цветами проходят через «грязные» промежуточные оттенки (например, из красного в зелёный через коричневый). В HSL и oklch() градиенты выглядят более естественно, так как интерполяция идёт по дуге цветового круга. Конвертер помогает определить HSL-значения контрольных точек градиента.

История цветовых моделей

Научное изучение цвета началось с экспериментов Исаака Ньютона (1666), разложившего белый свет призмой на спектр. Трёхкомпонентная теория зрения Юнга-Гельмгольца (1802–1867) установила, что глаз содержит три типа колбочек, чувствительных к красному, зелёному и синему — это и стало основой RGB-модели. Модель HSL разработана Алви Рэем Смитом в 1978 году для интуитивного описания цвета в компьютерной графике. Цветовое пространство CIE Lab (1976) стало первой попыткой создать перцептуально-однородную модель. Современные oklch() и oklab() (Бьорн Оттоссон, 2020) улучшают Lab, устраняя искажения в синей и пурпурной области спектра.

Для веб-разработки критической точкой стало принятие CSS Color Level 3 (2011), стандартизировавшего hsl() и rgba(). CSS Color Level 4 (2022) добавил oklch(), oklab(), color-mix() и расширенные цветовые пространства display-p3 и rec2020, вывод которых уже поддерживают экраны MacBook Pro (P3) и профессиональные мониторы.

Полезные таблицы и справочные данные

Таблица основных цветов CSS

Соотношение битности и количества цветов

Советы по работе с цветами

1. Начинайте с HSL. Если вы создаёте палитру с нуля, работайте в HSL: зафиксируйте оттенок (H), а затем варьируйте S и L для получения оттенков разной насыщенности и светлоты. Это гораздо проще, чем подбирать три канала в RGB.
2. Проверяйте контраст. Каждый текстовый цвет должен проходить WCAG AA (4.5:1 для обычного текста). Наш конвертер показывает контраст автоматически.
3. Не полагайтесь только на цвет. Около 8% мужчин имеют дефицит цветового зрения. Используйте не только цвет, но и форму, иконки, текст для передачи статуса (ошибка — красный + иконка + текст).
4. Используйте CSS Custom Properties. Определите базовые цвета в переменных: --brand-h: 24; --brand-s: 100%; --brand-l: 50%;. Затем генерируйте варианты: hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) - 10%)).
5. Тестируйте на разных экранах. Цвета выглядят по-разному на IPS, TN, OLED и E-Ink дисплеях. Критически важные элементы проверяйте на нескольких устройствах.

Источники

• W3C — CSS Color Module Level 4 (спецификация CSS-цветов, hsl(), oklch(), color-mix())
• WCAG 2.1 — Web Content Accessibility Guidelines (требования к контрастности)
• Бьорн Оттоссон — oklab/oklch: перцептуально-однородные цветовые пространства (2020)
• Ньютон И. «Оптика, или трактат об отражениях, преломлениях, изгибаниях и цветах света» (1704)
• Юнг Т. «О теории света и цветов» (1802)
• CIE Publication 15:2004 — Colorimetry (международный стандарт колориметрии)