Палитра комплементарных цветов
Выберите базовый цвет: его комплементарный цвет (противоположный на цветовом круге, на 180°) рассчитывается автоматически, а для обоих оттенков подбираются светлые и тёмные тона. 100% локальная обработка в вашем браузере — ничего не отправляется на сервер.
Как это работает
На цветовом круге комплементарный цвет расположен строго напротив базового (разница по тону — 180°). В сочетании эти два оттенка создают сильный визуальный контраст, который широко используют в дизайне, чтобы выделить кнопку действия, логотип или ключевой элемент на фоне противоположного цвета. Инструмент вычисляет точный комплементарный цвет, а затем для каждого оттенка строит более тёмную и более светлую версии — так вы сразу получаете готовую мини-палитру.
Зачем использовать комплементарную палитру вместо палитры близких оттенков?
Палитра близких (аналогичных) оттенков создаёт гармоничную и неброскую атмосферу, тогда как комплементарная палитра намеренно добавляет визуальное напряжение и притягивает взгляд. Она хорошо подходит для кнопки призыва к действию, значка уведомления и любого элемента, который должен чётко выделяться на фоне остального интерфейса.
Как использовать сгенерированные светлые и тёмные тона?
Тёмные тона хорошо подходят для текста и состояний «при наведении»/«активно», а светлые полезны для фонов секций, неактивных состояний и ненавязчивых бейджей — при этом всё остаётся в одной цветовой гамме с основным цветом или его комплементарным.
Все цветовые расчёты (преобразование HEX/HSL, поворот тона) выполняются локально на JavaScript прямо в вашем браузере.