Color Converter
Color Harmony
WCAG Contrast Checker
Normal text — The quick brown fox jumps over the lazy dog.
Large text — 18pt / Bold 14pt
Что такое конвертер цветов?
Один и тот же цвет можно записать по-разному: HEX (#3366ff) для CSS и передачи в дизайн, RGB (51, 102, 255) для экранов и API, и HSL (тон, насыщенность, светлота), в котором гораздо проще рассуждать об осветлении или обесцвечивании оттенка. Конвертер переводит одну запись в другую, не меняя сам цвет.
Пример: #3366FF означает R=0x33=51, G=0x66=102 и B=0xFF=255, то есть rgb(51, 102, 255). При max=255 и min=51 светлота L=(255+51)/2/255=60%. Доминирует синий канал, поэтому насыщенность равна 100%, а тон попадает в синий сектор на 225°, что даёт hsl(225, 100%, 60%). Белый текст на этом синем даёт контраст по WCAG около 4,7:1 — чуть выше 4,5:1, необходимых для обычного текста уровня AA.
Как пользоваться конвертером цветов
- Введите или вставьте цвет как #hex, rgb() или hsl() либо выберите его на цветовом круге.
- Посмотрите значения в других нотациях и скопируйте нужную.
- Переключайтесь между комплементарной и триадной гармонией, чтобы подобрать палитру.
- Укажите цвет текста и фона, чтобы проверить коэффициент контраста WCAG для обычного и крупного текста.
Частые вопросы о цвете и контрасте
Какое соотношение контраста нужно для доступности?
WCAG 2 уровня AA требует не менее 4,5:1 для обычного текста и 3:1 для крупного (18pt или 14pt полужирного). Уровень AAA поднимает планку до 7:1 и 4,5:1. Проверка показывает оба порога сразу.
Чем отличаются HEX, RGB и HSL?
Это разные записи одного цвета. HEX компактен и привычен в CSS, RGB напрямую соответствует каналам экрана, а HSL описывает тон, насыщенность и светлоту — его гораздо удобнее менять в коде.
Что такое комплементарные и триадные цвета?
Комплементарный цвет стоит на 180° напротив вашего на круге и даёт сильный контраст; триадная палитра берёт три цвета через 120° — яркая, но сбалансированная схема.
