Конвертер цветовых кодов
Цвета в веб-разработке можно задавать в нескольких форматах: hex, RGB, HSL и именованные цвета. Этот инструмент конвертирует между всеми форматами, отображает визуальный предпросмотр, рассчитывает коэффициент контрастности для доступности и генерирует дополнительные цветовые палитры.
Спецификации
Типичные сценарии использования
- Преобразование hex-цветов от дизайнера в HSL для удобства манипуляции
- Проверка соответствия цвета текста стандартам доступности WCAG
- Генерация цветовых палитр для дизайна пользовательского интерфейса
- Отладка CSS-значений цвета, которые отображаются не так, как ожидалось
- Нахождение hex-эквивалента именованных цветов CSS
Возможности
- Разбор hex (#RGB, #RRGGBB, #RRGGBBAA), RGB, RGBA, HSL, HSLA и именованных цветов
- Мгновенная конвертация между всеми цветовыми форматами
- Вывод HEX8 (8-значный hex с альфа-каналом)
- Визуальный предпросмотр цвета с переключением тёмного/светлого фона
- Предпросмотр образца текста на белом и чёрном фонах
- Расчёт коэффициента контрастности WCAG по отношению к чёрному и белому
- Классификация светлого/тёмного цвета
- Генерация комплементарных, аналогичных, триадных, тетрадных и монохроматических цветовых палитр
- Показ яркости и рекомендаций по доступности
Примеры
Советы
- С HSL часто проще работать: H — это цвет, S — насыщенность, L — яркость.
- Для доступного текста стремитесь к коэффициенту контрастности не менее 4.5:1 (WCAG AA).
- 8-значный hex-формат (#RRGGBBAA) включает альфа-прозрачность.
- CSS4 вводит новые цветовые пространства, такие как oklch(), для лучшей перцептуальной равномерности.
Описание Конвертер цветовых кодов
CSS-значения цвета определяют цвета для веб-оформления, используя несколько систем нотации. Наиболее распространённая — шестнадцатеричная (#RRGGBB), где каждая пара hex-цифр представляет каналы красного, зелёного и синего от 00 (0) до FF (255). Сокращённая форма #RGB удваивает каждую цифру (#F00 равно #FF0000). 8-значная форма #RRGGBBAA добавляет канал альфа-прозрачности.
Функциональные нотации предоставляют более интуитивное задание цветов. RGB (rgb(255, 0, 0)) указывает каналы как целые числа 0-255 или проценты. HSL (hsl(0, 100%, 50%)) использует оттенок (цветовой круг 0-360 градусов), насыщенность (0-100%) и светлоту (0-100%), что многие дизайнеры считают более интуитивным для создания цветовых палитр и настройки цветов. Оба формата — RGB и HSL — поддерживают альфа-прозрачность с rgba() и hsla() или современный синтаксис rgb(255 0 0 / 50%).
Доступность цветов — важная задача в веб-разработке. WCAG 2.1 определяет минимальные коэффициенты контрастности: 4.5:1 для обычного текста (уровень AA), 3:1 для крупного текста и 7:1 для повышенного контраста (уровень AAA). Недостаточный контраст делает текст трудным или невозможным для чтения пользователями с ослабленным зрением или дефектами цветового восприятия.
CSS также поддерживает 148 именованных цветов (таких как rebeccapurple, cornflowerblue, tomato), ключевое слово currentColor и новые цветовые пространства, такие как HWB (оттенок-белизна-чернота), LAB, LCH и OKLCH, обеспечивающие перцептуально равномерную манипуляцию цветом. Новые пространства особенно полезны для генерации гармоничных цветовых палитр и плавных градиентов.
Hex (#FF0000) и RGB (rgb(255,0,0)) оба задают значения каналов красного, зелёного и синего — hex использует шестнадцатеричную систему, а RGB — десятичные целые числа. HSL (hsl(0,100%,50%)) представляет цвет через оттенок (сам цвет на цветовом круге 0-360 градусов), насыщенность (интенсивность) и светлоту (яркость), что многие разработчики считают более интуитивным для создания вариаций. Все три формата могут представлять одни и те же цвета, но HSL делает простым создание более светлых, тёмных или приглушённых вариантов путём изменения одного значения.
Альфа-канал контролирует прозрачность по шкале от 0 (полностью прозрачный) до 1 (полностью непрозрачный). В hex-нотации альфа добавляется в виде двух дополнительных цифр — #FF000080 представляет красный с 50% прозрачностью (80 hex = 128 десятичных). В функциональной нотации синтаксис — rgba(255,0,0,0.5) или современная форма rgb(255 0 0 / 50%). Альфа-прозрачность необходима для наложений, водяных знаков и многослойных элементов интерфейса. Для соответствия WCAG уровень AA требует коэффициента контрастности не менее 4.5:1 для обычного текста и 3:1 для крупного текста (жирный 18px+ или обычный 24px+), а уровень AAA требует 7:1 для обычного текста и 4.5:1 для крупного текста. Нетекстовые элементы, такие как иконки, рамки и элементы форм, должны иметь контраст не менее 3:1 по отношению к смежным цветам.
LAB и OKLCH — это перцептуально равномерные цветовые пространства, в которых равные числовые изменения создают визуально равные различия в цвете, что делает их превосходными для генерации палитр и плавных градиентов. OKLCH (Светлота, Хрома, Оттенок) особенно полезен в CSS, поскольку изменение светлоты даёт естественные, предсказуемые результаты. Оба поддерживаются в современном CSS с помощью функций oklch() и lab().