HEX, RGB и HSL: выбор веб-формата цвета

Каждый цвет в этих нотациях — один и тот же цвет sRGB в разной одежде. HEX — это RGB, записанный по основанию шестнадцать: #4F46E5 — каналы красного, зелёного и синего по две шестнадцатеричные цифры каждый. rgb(79, 70, 229) называет те же три канала в десятичной записи, а hsl() описывает тот же пиксель как позицию на цветовом круге.

Преобразование между тремя внутри sRGB происходит без потерь: #4F46E5, rgb(79, 70, 229) и эквивалентное значение hsl() точно обратимы, так что смена нотации — выбор представления, а не изменение цвета.

• HEXHEX компактен и стабилен для копирования между инструментами дизайна и кодом — поэтому палитры и гайдлайны обычно публикуются в hex.
• RGBRGB читается как три интенсивности каналов от 0 до 255 и совпадает с тем, как экраны и форматы изображений реально хранят пиксели.
• HSLHSL читается как тон, насыщенность и светлота — ближе к тому, как люди описывают цвет, и гораздо проще для правок по намерению.

Прозрачность присоединяется к каждой нотации. rgb() и hsl() принимают четвёртый аргумент — rgba(79, 70, 229, 0.5), — а HEX обзавёлся восьмизначной формой #4F46E580, где последняя пара — альфа от 00 до FF.

• 0–1 или 00–FFАльфа идёт от 0 до 1 в функциональной нотации и от 00 до FF в hex; 0.5 и 80 — одно и то же полупрозрачное значение.
• Проверяйте на поверхностяхПолупрозрачный оверлей перемножается с тем, что под ним, поэтому полупрозрачный токен нужно проверять на каждой поверхности, где он может оказаться.
• Связанные токеныКогда дизайн-система выпускает плотную и полупрозрачную версии одного тона, один восьмизначный hex держит их видимо связанными.

Править каналы RGB напрямую — арифметика; править намерение проще в HSL. Тинт — тот же тон с большей светлотой, шейд — тот же тон с меньшей, приглушённый вариант — тот же тон с убавленной насыщенностью: три движения одной ручкой вместо трёх каналов, дрейфующих вместе.

Генератор оттенков строит эту рампу механически: дайте ему один hex-цвет, и он смешает его в сторону чёрного и в сторону белого, вернув от трёх до двадцати равноотстоящих ступеней в hex — так hover-состояние и тон рамки происходят из одного исходного цвета, а не из подобранных на глаз догадок.

• Тинты и шейдыТинты и шейды: зафиксируйте тон и насыщенность, пройдите светлоту от почти-белого к почти-чёрному — и получите рабочую рампу для фонов, состояний и текста.
• Состояния насыщенностиПриглушённые и яркие варианты получаются из одной ручки насыщенности — так hover- и disabled-состояния остаются в одном семействе.
• Поворот тонаПоворот тона порождает родственные цвета: аналогичные соседи лежат в пределах примерно тридцати градусов, комплементарные — в ста восьмидесяти.

Цветовые гармонии — это геометрия на круге тона: комплементарные пары сидят напротив, триадные наборы делят круг на трети, аналогичные группы кучкуются рядом. HSL делает математику видимой — измените одно число, и вся схема сдвинется.

Генератор цветовых гармоний применяет ровно эту модель. Из одного шестизначного seed в hex он строит пятицветные палитры в шести классических схемах — аналогичная, комплементарная, раздвоённо-комплементарная, триадная, тетрадная и монохромная — и проверяет контраст каждого образца с чёрным и белым текстом по целевым коэффициентам WCAG 3, 4.5 или 7.

Результат экспортируется как пользовательские свойства CSS и как JSON, так что палитра сразу ложится в таблицу стилей или файл токенов. Поскольку движок детерминирован, тот же seed и та же схема всегда воспроизводят те же пять цветов — делитесь seed, а не скриншотом.

Современный CSS объединил старые функциональные формы: каналы через пробел с необязательной косой чертой для альфы — rgb(79 70 229 / 0.5) — заменяют нагруженный запятыми rgba(). Спецификация уровня 4 также добавляет нотации hwb(), lab() и oklch() для более широких охватов и перцептивно ровных рамп.

Какую бы нотацию вы ни стандартизировали, смешение двух цветов — поканальная операция: «Смешивание цветов» блендит два цвета с выбранным весом и сообщает результат как RGBA и hex, так что середину между двумя фирменными цветами можно вычислить, а не прикидывать на глаз.

Тот же инструмент работает мостом между нотациями: подайте цвет в одной форме и прочитайте результат в другой — арифметика останется честной, когда в спецификации hex, а таблица стилей написана в rgb().

• Новый синтаксисКаналы через пробел с косой чертой для альфы работают во всех актуальных браузерах; формы с запятыми поддерживаются как унаследованные алиасы.
• Зачем OKLCHoklch() чинит реальный изъян HSL: равные шаги светлоты в HSL выглядят неодинаково яркими на разных тонах, а OKLCH держит воспринимаемую светлоту согласованной.
• Внедряйте осознанноВнедряйте новые нотации там, где они решают задачу — согласованные рампы, широкоохватные экраны, — и оставляйте hex или rgb() там, где инструменты и привычки уже работают.

Палитры редко начинаются с теории; они начинаются со скриншота, логотипа или фотографии. Чтение точных значений пикселей из источника надёжнее, чем прикидывать образец на глаз у цветового круга.

Пипетка для изображения открывает PNG, JPEG или WebP во вкладке и сообщает точное значение RGBA пикселя, по которому вы кликнули, — полезно, чтобы восстановить фирменный цвет из старого ассета или проверить, что на самом деле содержит сглаженный край.

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