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

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

HEX и rgb() могут точно представлять одни и те же восьмибитные каналы sRGB. Значение 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, а в восьмизначном hex — от 00 до FF. Байт 80 означает 128/255, то есть примерно 0,502: близко к 0,5, но не в точности.
• Проверяйте на поверхностяхПолупрозрачный слой компонуется с фоном согласно своей альфе, поэтому проверяйте его на каждой поверхности, где он будет показан.
• Связанные токеныКогда дизайн-система выпускает плотную и полупрозрачную версии одного тона, один восьмизначный hex держит их видимо связанными.

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

Color Shades Generator строит шкалу механически: берёт один hex-цвет, смешивает его с чёрным и белым и возвращает от трёх до двадцати взвешенных шагов в hex. Они не равномерны для человеческого восприятия; проверяйте каждый вариант в реальном интерфейсе.

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

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

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

Результат экспортируется как пользовательские свойства CSS и JSON. Чтобы воспроизвести пять цветов, передайте исходный цвет и схему; если важны те же метки прохождения проверки, укажите и целевой контраст.

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

Color Mixer принимает поддерживаемые цвета в hex, предлагает интерполяцию с учётом альфы или композицию source-over и выдаёт результат в hex и RGBA. Перед сравнением двух фирменных цветов выберите операцию и вес.

Поле ввода принимает hex-текст, а не произвольное цветовое выражение CSS. Перед использованием инструмента переведите значения rgb() или hsl() в поддерживаемую форму hex.

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

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

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

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