Работа с цветом — неотъемлемая часть веб-дизайна и разработки. Понимание форматов цвета помогает правильно задавать оттенки в CSS, поддерживать доступность и строить согласованные палитры. Онлайн-пикер цветов упрощает выбор и конвертацию между форматами.
Форматы цветов: HEX, RGB, HSL, HSV
В веб-разработке используется несколько способов задать цвет. У каждого свои преимущества.
HEX
Шестнадцатеричная запись — самый распространённый формат в CSS:
color: #FF5733; /* полная запись */
color: #F53; /* сокращённая (если пары совпадают) */
color: #FF5733CC; /* с прозрачностью (альфа-канал) */
Формат: #RRGGBB, где каждая пара — значение канала от 00 (0) до FF (255).
RGB
Явная запись трёх каналов — красного, зелёного и синего:
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.8); /* с прозрачностью */
Каждый канал — целое число от 0 до 255. Удобен, когда нужно управлять каналами программно.
HSL
Цветовая модель Hue–Saturation–Lightness (тон–насыщенность–яркость):
color: hsl(14, 100%, 60%);
color: hsla(14, 100%, 60%, 0.8); /* с прозрачностью */
- H (Hue) — тон, угол на цветовом круге от 0° до 360°
- S (Saturation) — насыщенность: 0% серый, 100% чистый цвет
- L (Lightness) — яркость: 0% чёрный, 50% средний, 100% белый
HSL интуитивен: чтобы сделать цвет темнее, уменьшите L.
HSV (HSB)
Похож на HSL, но вместо Lightness использует Value/Brightness:
| Параметр | HSL | HSV |
|---|---|---|
| H = 0, S = 100%, L/V = 50% | Красный | Красный |
| H = 0, S = 100%, L/V = 100% | Белый | Красный (чистый) |
| H = 0, S = 0%, L/V = 50% | Серый | Серый |
HSV чаще используется в редакторах изображений (Photoshop, Figma), HSL — в CSS.
Конвертация между форматами
Пикер цветов позволяет вводить значение в любом формате и получать остальные автоматически. Например, #FF5733 эквивалентно:
- RGB:
rgb(255, 87, 51) - HSL:
hsl(14, 100%, 60%) - HSV:
hsv(14, 80%, 100%)
Для программной конвертации цветов воспользуйтесь конвертером цветов.
Контрастность WCAG и доступность
WCAG 2.1 требует минимального соотношения контрастности для текста на фоне:
| Уровень | Обычный текст | Крупный текст (18pt+) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Пример проверки контрастности:
- Чёрный
#000000на белом#FFFFFF→ 21:1 — отличный контраст - Серый
#767676на белом → 4.54:1 — проходит AA - Светло-серый
#AAAAAAна белом → 2.32:1 — не проходит ни один уровень
При выборе цветов для интерфейса всегда проверяйте контрастность с помощью инструмента проверки контрастности. Это особенно важно для пользователей с нарушениями зрения.
Создание цветовых палитр
Гармоничные палитры строятся по правилам цветового круга:
Комплементарные (дополнительные) — два цвета напротив друг друга (180°). Создают высокий контраст.
Аналогичные — три цвета рядом (±30°). Мягкое, единое ощущение.
Триадные — три цвета равномерно (120°). Яркость при сохранении баланса.
Сплит-комплементарные — основной + два соседних к дополнительному. Менее агрессивный контраст.
Для автоматической генерации палитр по базовому цвету используйте генератор градиентов.
Современные CSS-функции для цвета
CSS Color Level 4 добавляет color-mix() для смешивания цветов, oklch() для перцептивно равномерного задания оттенков и синтаксис относительных цветов. Эти функции поддерживаются в Chrome 111+, Firefox 113+, Safari 16.4+.
Инструмент на reChecker
Пикер цветов на reChecker позволяет выбрать любой цвет на визуальной палитре и мгновенно получить его значение в форматах HEX, RGB и HSL. Скопируйте нужный формат одним кликом.