Цвета в Интернете могут быть представлены в нескольких форматах. HEX использует шестнадцатеричную запись (#RRGGBB), RGB определяет компоненты красного, зеленого и синего (0–255), а HSL использует оттенок (0–360), насыщенность и яркость (0–100%). Каждый формат имеет преимущества для различных случаев использования, таких как дизайнерские работы или программные манипуляции с цветом.

Подробности цветового формата

Цвета HEX кодируют значения RGB в шестнадцатеричном формате (16–255 на канал). RGB напрямую определяет интенсивность цвета (0–255). HSL отделяет цвет (оттенок) от интенсивности (насыщенности/яркости), что делает его более интуитивным для создания цветовых вариаций. Все форматы могут отображать одни и те же 16,7 миллионов цветов.

Общие случаи использования

Преобразование цветов инструментов дизайна в CSS
Создание цветовых тем и палитр.
Настройка яркости и насыщенности цвета
Соответствие цветов бренда на разных платформах
Тестирование доступности на цветовой контраст

Сравнение форматов

HEX #RRGGBB — компактный, широко поддерживаемый, легко копируется и вставляется.

RGB rgb(R, G, B) — интуитивно понятен для программного манипулирования.

HSL hsl(H, S%, L%) — легко создавать вариации путем настройки компонентов.

Часто задаваемые вопросы

Когда мне следует использовать HSL вместо RGB?

HSL лучше подходит, когда вам нужно создать цветовые вариации (светлее, темнее, более/менее насыщенный), поскольку вы можете настроить один компонент. RGB лучше подходит для смешивания цветов и при работе с обработкой изображений.

Что такое HEX-сокращение?

В сокращении HEX используются 3 цифры вместо 6 (#RGB вместо #RRGGBB). Каждая цифра удваивается: #F00 становится #FF0000 (красный). Работает только тогда, когда каждая пара имеет одинаковые цифры.