Об этом инструменте
Цветовые гармонии — это отношения оттенков, взятые прямо с цветового круга: комплементарная сочетает два противоположных оттенка для максимального контраста, аналоговая группирует три соседних оттенка для спокойного, целостного впечатления, триадная располагает три оттенка на равном расстоянии для яркого, но сбалансированного вида, тетрадная располагает четыре оттенка на равном расстоянии для насыщенной палитры, которую сложнее сбалансировать, а раздельно-комплементарная заменяет единственный истинный комплемент двумя соседними с ним оттенками — сохраняя большую часть контраста комплементарной схемы с меньшим визуальным напряжением.
Выберите базовый цвет, выберите схему, и этот инструмент вычислит все остальные оттенки с той же насыщенностью и светлотой, чтобы набор смотрелся единым семейством. Каждый образец показывает своё точное значение hsl() и копирует его в буфer обмена по клику — вставляйте прямо в CSS. Всё выполняется локально в браузере; ничего не загружается на сервер, а ваш базовый цвет и последняя схема запоминаются для следующего раза.
Частые вопросы
Какую цветовую гармонию использовать для сайта?
Аналоговые схемы обычно выглядят спокойно и слаженно для контентных сайтов, а комплементарные или раздельно-комплементарные создают более сильный контраст для призывов к действию — попробуйте несколько вариантов и посмотрите, что подходит вашему бренду.
Учитывает ли это доступность/контраст цветов?
Нет — схемы это чистая математика оттенков, без проверки контраста. Всегда отдельно проверяйте пары текст/фон по коэффициентам контраста WCAG перед публикацией.