Форматы цветов объяснены: HEX, RGB и HSL
Быстрый ответ
HEX (#RRGGBB) и RGB (0–255 на канал) напрямую кодируют интенсивности красного, зелёного и синего. HSL (тон 0–360°, насыщенность/светлота 0–100%) кодирует цвет в соответствии с человеческим восприятием. Конвертируйте между всеми тремя с помощью нашего Color Converter.
Введение
Веб-цвета задаются в трёх доминирующих форматах: HEX (base-16 красный, зелёный, синий), RGB (десятично 0–255 на канал) и HSL (тон, насыщенность, светлота). Все три описывают одно цветовое пространство sRGB, но дают разные оси: HEX и RGB аппаратно-ориентированы, а HSL — человеко-ориентирован. Современный CSS поддерживает alpha через HEX8, rgba() и hsla().
Шаг за шагом
-
Понимание нотации HEX
HEX записывает каждый канал как двузначное число по основанию 16: #RRGGBB. 00 выключен, FF (255) — полная интенсивность. #FF0000 — чисто красный, #00FF00 — чисто зеленый, #0000FF — чисто синий, #FFFFFF — белый, #000000 — черный. Четырехзначное сокращение #RGB расширяется до #RRGGBB, а #RRGGBBAA добавляет альфу (например, #FF573380 составляет 50 % альфа).
-
Понимание нотации RGB
RGB использует десятичные числа от 0 до 55 для каждого канала: rgb(255, 87, 51) аналогичен #FF5733. Функция rgba() добавляет 0-альфа: rgba(255, 87, 51, 0,5) непрозрачен на 50%. RGB эквивалентно HEX — оно просто десятичное, а не шестнадцатеричное.
-
Понимание нотации HSL
HSL использует оттенок (0–60° на цветовом круге: 0 = красный, 120 = зеленый, 240 = синий), насыщенность (0 % = серый, 100 % = полноцветный) и яркость (0 % = черный, 50 % = нормальный, 100 % = белый). hsl(11, 100%, 60%) — ярко-оранжевый. HSL упрощает создание оттенков (повышение яркости) и теней (понижение яркости) одного и того же оттенка.
-
Преобразование между форматами
HEX→RGB: анализировать каждую пару по основанию 16. RGB→HEX: преобразовать каждый канал в двухзначный формат с основанием 16. RGB→HSL: вычисляется макс/мин нормализованных каналов, яркость = (макс+мин)/2, насыщенность зависит от освещенности, оттенок — угол доминирующего канала. Используйте наш конвертер цветов, чтобы сделать все это мгновенно.
-
Выберите правильный формат задачи
Используйте HEX для компактности токенов и ресурсов дизайна. Используйте RGB/rgba(), когда вам нужно интерполировать или анимировать каналы. Используйте HSL/HSLA при создании палитр, оттенков или вариантов тем — регулировать яркость на 10 % гораздо проще, чем рассуждать о дельтах RGB.
Примеры
Чистый красный во всех трех форматах
Вход: #FF0000
Выход: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Яркий оранжевый
Вход: #FF5733
Выход: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Белый и черный
Вход: #FFFFFF и #000000
Выход: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Создание 5-ступенчатого оттенка из одного оттенка HSL
Вход: hsl(210, 70%, 50%) — варьируйте яркость 30/40/50/60/70%
Выход: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 — последовательная синяя палитра.
Распространенные проблемы
- Смешивание 3-значного и 6-значного символов HEX: #F00 и #FF0000 имеют один и тот же цвет, но некоторые анализаторы принимают только одну форму. Нормализуйте код до 6-значного, чтобы избежать сюрпризов.
- Забываем, что HSL яркость 50 % — это не «половинная яркость»: при насыщенности 100 % яркость 50 % — это чистый оттенок; выше 50% он становится белым, ниже 50% — черным. «50% серого» — это hsl(0, 0%, 50%).
- Путаница с альфа-каналом: #RRGGBBAA (HEX8) поддерживается в современных браузерах, но не поддерживается в старых; rgba()/hsla() имеет более широкую поддержку. Всегда проверяйте целевую среду.
- Несоответствие цветового пространства: HEX, RGB и HSL описывают sRGB. Если вы конвертируете в/из P3 или Lab/OKLCH (используется современными дисплеями), простая копия канала дает неправильные цвета — используйте подходящую библиотеку цветов.
Советы
- Используйте HSL при разработке палитры: выберите один оттенок, затем измените яркость (например, 30/50/70%) и насыщенность (например, 60/80/100%), чтобы создать согласованные оттенки и оттенки.
- Для доступности проверьте контрастность по отношению к фону — для обычного текста WCAG AA требуется 4,5:1, для AAA — 7:1. Используйте наш конвертер цветов для расчета относительной яркости и контрастности.
- Отдайте предпочтение современным методам CSS color-mix() или oklch() для обеспечения единообразной интерполяции — интерполяция RGB может проходить через грязно-серые оттенки при смешивании дополнительных цветов.
- При создании градиентов сначала преобразуйте конечные точки в один и тот же формат — смешивание HEX и HSL в одном объявлении градиента может привести к неожиданным средним точкам.