Гармоничная палитра строится не подбором «на глаз», а по положению цветов на цветовом круге. Выберите базовый оттенок, и конструктор рассчитает связанные с ним цвета по выбранной схеме, а затем выдаст готовые коды в форматах HEX, RGB и HSL — их можно сразу вставлять в CSS.
Монохромная схема использует один тон в разной светлоте и насыщенности. Самый безопасный вариант для интерфейсов: конфликтов цветов не возникает в принципе, но макет легко получается скучным — компенсируйте контрастом по яркости.
Комплементарная схема берёт два противоположных цвета круга. Даёт максимальный контраст и хорошо работает по правилу 60/30/10: основной цвет на 60% площади, вспомогательный на 30%, комплементарный акцент — только на 10% (кнопки, ссылки, важные уведомления).
Триада — три равноудалённых цвета. Контраст мягче комплементарного, палитра выглядит живой и сбалансированной. Требует дисциплины: один цвет обязан доминировать, иначе страница распадается на конкурирующие пятна.
Тетрада использует четыре цвета — две комплементарные пары. Самая сложная схема в управлении, зато даёт достаточно оттенков для больших интерфейсов с несколькими смысловыми зонами.
Полученные значения удобно объявить один раз через пользовательские свойства, а дальше обращаться к ним по имени — при смене палитры править придётся только корневой блок:
:root {
--color-primary: #1a5f7a;
--color-secondary: #7a1a5f;
--color-accent: #7a5f1a;
--color-surface: #f4f6f7;
--color-text: #1c2226;
}
.button {
background: var(--color-primary);
color: var(--color-surface);
}Формат HSL удобнее HEX, когда нужно построить ряд оттенков одного цвета: достаточно менять третье значение (светлоту), сохраняя тон и насыщенность. Подробнее о свойствах цвета — в справочнике CSS, а поштучно подобрать конкретный оттенок можно в палитре цветов.
Красивая палитра может оказаться нечитаемой. Стандарт WCAG требует коэффициента контраста не менее 4,5:1 для обычного текста и 3:1 для крупного (от 18pt или 14pt полужирным). Отдельно проверьте схему в режиме Colorblind — протанопия и дейтеранопия вместе затрагивают около 8% мужчин, и связка «зелёный/красный» для них сливается. Практическое правило: никогда не передавайте смысл одним лишь цветом, дублируйте его иконкой, подписью или начертанием.
Выберите базовый цвет на цветовом круге и тип схемы — монохромную, комплементарную, триаду или тетраду. Конструктор рассчитает гармоничные оттенки и покажет их коды в HEX, RGB и HSL для вставки в CSS.
Комплементарная схема строится на двух противоположных цветах круга и даёт максимальный контраст. Триадная берёт три равноудалённых цвета — контраст мягче, а палитра выглядит более сбалансированной.
В меню Colorblind выберите тип нарушения цветовосприятия — протанопию, дейтеранопию или тританопию. Палитра перерисуется так, как её видит пользователь с этой особенностью зрения.