Дизайнер прислал цвет в HSL, а в CSS нужен HEX. Или наоборот: в макете стоит #7C5CFA, а в коде удобнее rgb(). Или нужно проверить, достаточно ли контраста между текстом и фоном, чтобы страница прошла по доступности. Конвертер цветов HEX, RGB, HSL переводит цвет между форматами, позволяет выбрать его пипеткой и проверяет контраст с белым и чёрным текстом по требованиям WCAG.
В этой статье разберём, чем отличаются форматы цвета, что значат уровни AA и AAA, как работает прозрачность и почему контраст важнее точного оттенка.
Что умеет конвертер
Конвертер цветов принимает цвет в любом из форматов и переводит его в остальные.
| Параметр | Что делает |
|---|---|
| Цвет | #7c5cfa, rgb(124 92 250) или hsl(252 94% 67%) |
| Палитра | Выбор цвета пипеткой |
| Преобразовать | Переводит цвет во все форматы |
| Результат | HEX, rgb(), hsl() с кнопкой копирования |
| Контраст с белым | Коэффициент и уровень WCAG |
| Контраст с чёрным | Коэффициент и уровень WCAG |
Всё выполняется в браузере: введённые данные никуда не отправляются.
HEX, RGB и HSL: чем отличаются
Три формата описывают один и тот же цвет, но по-разному.
| Формат | Пример | Как описывает цвет |
|---|---|---|
| HEX | #7C5CFA |
Шестнадцатеричные значения красного, зелёного и синего |
| RGB | rgb(124 92 250) |
Красный, зелёный и синий в диапазоне 0–255 |
| HSL | hsl(252 94% 67%) |
Оттенок, насыщенность и светлота |
HEX — компактная запись, стандарт для CSS и дизайна. Шесть символов: по два на каждый канал.
RGB — тот же цвет, но числами. Удобен, когда нужно программно изменить один канал.
HSL — цвет в терминах, понятных человеку: оттенок (0–360°), насыщенность (0–100%) и светлота (0–100%). Удобен для подбора оттенков: меняя светлоту, получаешь более светлый или тёмный вариант.
Зачем переводить цвет между форматами
| Задача | Почему нужен перевод |
|---|---|
| CSS | В коде может требоваться конкретный формат |
| Дизайн | В макете цвет в одном формате, в коде — в другом |
| Подбор оттенков | HSL удобнее для изменения светлоты и насыщенности |
| Программная обработка | RGB проще для вычислений |
| Прозрачность | Нужен формат, поддерживающий альфа-канал |
| Проверка контраста | Нужен коэффициент для WCAG |
Контраст и WCAG: что значат AA и AAA
WCAG (Web Content Accessibility Guidelines) — рекомендации по доступности веба. Один из критериев — достаточный контраст между текстом и фоном.
| Уровень | Обычный текст | Крупный текст |
|---|---|---|
| AA | Не меньше 4,5:1 | Не меньше 3:1 |
| AAA | Не меньше 7:1 | Не меньше 4,5:1 |
Инструмент показывает контраст с белым и чёрным текстом и указывает уровень: например, «4.40 : 1 — только крупный текст» или «4.77 : 1 — AA».
Это значит:
- Если контраст ниже 4,5:1, обычный текст не проходит AA. Для крупного текста порог ниже — 3:1.
- Если контраст ниже 3:1, не проходит даже крупный текст.
- 7:1 и выше — уровень AAA для обычного текста.
Контраст важнее точного оттенка: красивый цвет с недостаточным контрастом делает текст нечитаемым для части пользователей.
Прозрачность
Инструмент поддерживает прозрачность: #rrggbbaa, rgba() и hsla(). Прозрачность сохраняется во всех форматах.
| Формат | Пример с прозрачностью |
|---|---|
| HEX | #7c5cfa80 |
| RGB | rgba(124, 92, 250, 0.5) |
| HSL | hsla(252, 94%, 67%, 0.5) |
Это полезно, когда цвет накладывается на фон и итоговый оттенок зависит от подложки.
Пипетка: выбрать цвет с экрана
Палитра позволяет выбрать цвет пипеткой — например, взять оттенок с картинки или из другого приложения. Это быстрее, чем вручную подбирать значения.
Зачем проверять контраст
| Задача | Что даёт проверка |
|---|---|
| Доступность | Соответствие WCAG AA или AAA |
| Читаемость | Текст виден на фоне |
| Дизайн | Проверить, не слишком ли бледный текст |
| Аудит | Найти проблемные сочетания цветов |
| Тёмная тема | Проверить контраст в обеих темах |
Ограничения инструмента
- Контраст считается с белым и чёрным. Для других фонов нужен отдельный расчёт.
- Прозрачность влияет на итоговый контраст. Если цвет полупрозрачный, итоговый оттенок зависит от фона.
- Не заменяет аудит доступности. Инструмент проверяет контраст, но доступность включает и другие критерии.
- Палитра зависит от браузера. В разных браузерах пипетка может работать по-разному.
Как пользоваться: пошагово
- Введите цвет в любом формате или выберите его в палитре.
- Нажмите «Преобразовать».
- Скопируйте нужную запись; ниже показан контраст с белым и чёрным.
Типичные ошибки
Игнорировать контраст. Красивый цвет с низким контрастом делает текст нечитаемым. Проверяйте коэффициент.
Путать AA и AAA. AA — минимальный уровень, AAA — повышенный. Для обычного текста пороги разные.
Забывать про прозрачность. Полупрозрачный цвет на разных фонах даёт разный контраст. Проверяйте итоговый оттенок.
Считать, что контраст с белым и чёрным — единственный. Для цветного фона нужен отдельный расчёт.
Переводить цвет вручную. Ошибка в одном символе HEX даёт другой цвет. Используйте конвертер.
Игнорировать крупный текст. Для крупного текста порог ниже, но это не значит, что контраст можно не проверять.
Вопросы и ответы
Что значат AA и AAA? Уровни доступности WCAG: для обычного текста нужен контраст не меньше 4,5:1 (AA) или 7:1 (AAA), для крупного — 3:1.
Поддерживается прозрачность? Да: #rrggbbaa, rgba() и hsla() — прозрачность сохраняется во всех форматах.
Чем HSL удобнее RGB? HSL описывает цвет в понятных человеку терминах: оттенок, насыщенность, светлота. Менять светлоту проще, чем подбирать числа RGB.
Почему контраст с белым и чёрным разный? Белый и чёрный дают разный коэффициент контраста с одним и тем же цветом. Инструмент показывает оба, чтобы выбрать подходящий вариант текста.
Что делать, если контраст ниже AA? Затемнить или осветлить цвет, чтобы повысить контраст, либо использовать другой цвет фона или текста.
Можно ли выбрать цвет пипеткой? Да, палитра позволяет выбрать цвет, например с картинки или из другого приложения.
Итог
Конвертер цветов HEX, RGB, HSL — инструмент для перевода цвета между HEX, RGB и HSL, выбора пипеткой и проверки контраста с белым и чёрным текстом по WCAG. Он поддерживает прозрачность и показывает уровни AA и AAA, а всё выполняется в браузере. Помните, что контраст важнее точного оттенка, и проверяйте его до публикации — и дизайн будет не только красивым, но и доступным.