Пикер цветов: HEX, RGB, HSL и палитры

Работа с цветом — неотъемлемая часть веб-дизайна и разработки. Понимание форматов цвета помогает правильно задавать оттенки в 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. Скопируйте нужный формат одним кликом.

Открыть инструмент на reChecker →