В CSS один и тот же цвет можно записать как минимум тремя разными способами, и каждый из них удобен для своей задачи — от дизайна до анимации прозрачности.
HEX: компактная запись для копирования
Шестнадцатеричная запись вроде #FF5733 кодирует три канала — красный, зелёный, синий — по два символа на каждый. Это самый компактный формат, удобный для копирования из дизайн-макетов, но почти нечитаемый для человека: сложно на глаз понять, какой оттенок скрывается за набором цифр.
RGB: прямой доступ к каналам
rgb(255, 87, 51) записывает те же три канала десятичными числами от 0 до 255. Это удобно, когда нужно программно менять отдельный канал, например плавно увеличивать красный в JavaScript-анимации.
HSL: интуитивный подбор оттенка
HSL описывает цвет через оттенок (hue, 0–360°), насыщенность и яркость. Это самый удобный формат для ручного подбора цвета: чтобы получить более тёмный вариант того же оттенка, достаточно уменьшить только яркость, не пересчитывая все три канала RGB заново.
Альфа-канал для прозрачности
Форматы rgba() и hsla() добавляют четвёртый параметр — прозрачность от 0 до 1. Современный CSS позволяет задавать прозрачность и в HEX через два дополнительных символа в конце, например #FF573380.
Зачем это нужно
- Быстро конвертировать цвет из дизайн-макета в нужный CSS-формат.
- Подобрать более тёмный или светлый оттенок того же цвета через HSL.
- Добавить прозрачность к цвету, не меняя его базовый оттенок.
Почему в русском языке два «синих»
В HSL-модели этого конвертера оттенок — это одно непрерывное число от 0 до 360°, но в русском языке нет единого слова, которое покрывало бы весь этот диапазон синего так, как английское «blue». У «синего» и «голубого» разные, самостоятельные названия — это не оттенки одного цвета, а два базовых цветонаименования, как в английском «red» и «orange» отдельны друг от друга. Лингвисты используют русский именно как хрестоматийный пример языка без гиперонима для синего: там, где англоговорящий скажет light blue и dark blue про один и тот же «blue», носитель русского почти всегда выберет между голубым и синим как между разными цветами. Психолингвистические эксперименты (в частности, исследование Джонатана Уинавера с коллегами, 2007) показывают, что это отражается даже на скорости различения оттенков на глаз, а не только на словах.