Как пользоваться
- 1Задайте базовый цвет в палитре или в формате HEX/RGB либо нажмите «Случайный цвет» для вдохновения.
- 2Выберите цветовую модель: OKLCH сохраняет одинаковую воспринимаемую светлоту, HSL использует классический цветовой круг.
- 3Посмотрите комплементарную, аналоговую, триадную, расщеплённую комплементарную, тетрадную, квадратную и монохромную палитры; нажмите на образец, чтобы сделать его новым базовым цветом.
- 4Нажмите «Экспортировать эту палитру» и скопируйте её как CSS-переменные или список HEX; для пар текст/фон откройте проверку контраста.
Виды цветовых гармоний
Комплементарная схема использует два противоположных цвета круга (180°) и даёт сильный контраст. Аналоговая объединяет соседние цвета (±30°) и выглядит спокойно и естественно. Триада делит круг на три цвета через 120°; расщеплённая комплементарная берёт вместо противоположного цвета двух его соседей (150° и 210°) и получается мягче. Тетрада (прямоугольник) и квадрат дают насыщенные палитры из четырёх цветов, а монохромная палитра состоит из более светлых и тёмных вариантов одного тона.
HSL или OKLCH?
При повороте тона в HSL воспринимаемая яркость скачет: жёлтый кажется намного светлее синего при тех же насыщенности и светлоте. OKLCH — перцептивная модель, которая при повороте тона сохраняет светлоту и хроматичность, поэтому палитра выглядит сбалансированнее. Цвета, не помещающиеся в sRGB, возвращаются в охват за счёт снижения хроматичности. HSL подходит для результатов, близких к классическому кругу художника, OKLCH — для интерфейсов и фирменных палитр.
Контраст и доступность
Под каждым образцом показан коэффициент контраста WCAG с белым (◻) и чёрным (◼) текстом: от 4,5:1 — уровень AA для обычного текста (зелёный), от 3:1 до 4,5:1 — только для крупного текста (жёлтый), ниже — недостаточно для текста (красный). Если палитра пойдёт на сайт, проверьте реальные пары текста и фона в инструменте проверки контраста. Все расчёты выполняются в браузере.
Частые вопросы
Как найти комплементарный цвет?
Повернуть тон на 180° по цветовому кругу. Инструмент делает это в HSL или OKLCH и выдаёт значение HEX.
Какие цвета сочетаются между собой?
Цвета, расположенные на круге под определёнными углами: напротив (комплементарные), рядом (аналоговые), через 120° (триада) или 90° (квадрат). Монохромные палитры гармоничны всегда.
Можно ли экспортировать палитру в CSS?
Да. Нажмите «Экспортировать эту палитру», выберите CSS-переменные и скопируйте — получится блок :root с переменными --color-…. Есть и простой список HEX.
Показывает ли инструмент смешивание красок?
Нет, он работает с экранными цветами (RGB). Как смешиваются настоящие пигменты, покажет инструмент смешивания цветов.
Результаты не радуют?
Обратитесь в Webin Agency: быстрые сайты с SEO-оптимизацией, интернет-магазины и ведение Google Ads.