Коды цветов в вебе: HEX, RGB и HSL
В веб-разработке цвета определяются преимущественно тремя форматами: HEX, RGB и HSL. Этот инструмент мгновенно конвертирует любой цвет во все три формата, а также показывает CSS-название и дополнительный цвет.
HEX-коды цветов
HEX — наиболее распространённый формат цвета в вебе. Записывается как #RRGGBB, где каждая пара указывает интенсивность канала (Красный, Зелёный, Синий) от 00 до FF (0–255). При 256 значениях на канал HEX поддерживает 16 777 216 цветов. Сокращённая запись #RGB также допустима: #F06 → #FF0066.
Цветовая модель RGB
RGB отражает физическую структуру экранов. Каждый канал принимает значения от 0 до 255. В CSS: rgb(255, 87, 51) или с прозрачностью rgba(255, 87, 51, 0.8).
Цветовая модель HSL
HSL (Тон-Насыщенность-Яркость) интуитивнее для дизайнеров. Тон: 0–360° на цветовом круге. Насыщенность: 0%=серый, 100%=яркий цвет. Яркость: 0%=чёрный, 50%=нормальный, 100%=белый. Создавать светлые и тёмные варианты цвета просто: сохранять тон и насыщенность, менять яркость.
Дополнительные цвета
Дополнительные цвета находятся на 180° друг от друга на цветовом круге: Красный ↔ Голубой, Зелёный ↔ Пурпурный, Синий ↔ Жёлтый. Они создают максимальный контраст для кнопок CTA и визуализации данных.
Веб-доступность (WCAG)
Около 8% мужчин страдают цветовой слепотой. WCAG 2.1 AA требует коэффициент контрастности не менее 4,5:1 для обычного текста. Никогда не передавайте информацию только через цвет.
Именованные цвета CSS
CSS определяет 148 именованных цветов (red, navy, coral, teal и др.). Инструмент распознаёт их автоматически и показывает название.
Конфиденциальность
Все вычисления выполняются локально в браузере. Никакие данные не передаются на серверы.
Практическая проверка цвета
В generatorsconverters.com можно выбрать цвет через color picker или ввести HEX вручную. Скрипт нормализует значение, раскрывает короткую запись, рассчитывает RGB, HSL, CSS-название при точном совпадении со списком named colors и дополнительный цвет через сдвиг тона на 180 градусов. Это помогает быстро подготовить значения для CSS, design tokens, inline style, SVG или документации.
HEX удобен для хранения и передачи цвета, RGB часто нужен в JavaScript и canvas, а HSL проще использовать при настройке оттенка, насыщенности и светлоты. Дополнительный цвет не всегда является готовым решением для интерфейса: его нужно проверить по контрасту, размеру текста и фону. Для кнопок, предупреждений и форм учитывайте не только основной цвет, но и hover, focus, disabled и тёмную тему.
Как читать результат в интерфейсе
Инструмент не просто показывает выбранный цвет, а сразу раскладывает его на практические форматы: HEX для CSS-переменных и макетов, RGB для работы с каналами 0-255, HSL для изменения оттенка, насыщенности и светлоты, а также дополняющий цвет через поворот hue примерно на 180 градусов. Если введен короткий HEX, он нормализуется в полный вид #RRGGBB. Название CSS появляется только при точном совпадении со стандартным именованным цветом, поэтому отсутствие имени не делает оттенок неправильным.
Комментарии