Что такое Поиск дополнительных цветов?

Комплементарный поиск цветов рассчитывает противоположный цвет на цветовом круге для любого введённого значения. Также показывает аналогичные, триадные и расщеплённо-комплементарные гармонии, чтобы вы могли собрать цельную палитру.

Под капотом работает HSL-математика chroma-js: цветовой круг поворачивается на фиксированные углы и получается шесть схем — комплементарная (180°), аналоговая (±30°), триадная (120° и 240°), расщеплённая комплементарная (150° и 210°), тетрадная/квадратная (90°, 180°, 270°) и монохромная (более светлые и более тёмные оттенки базы). У каждого образца показаны HEX, RGB и HSL, любую запись можно скопировать одним кликом и сразу вставить в Figma, конфиг Tailwind или CSS-правило.

Как использовать

1. Шаг 1 — Введите базовый цвет в формате HEX (#FF6600) или RGB (255 102 0), либо выберите его с помощью палитры.
2. Шаг 2 — Посмотрите комплементарный цвет (противоположный на 180° на цветовом круге) и его цветовые коды.
3. Шаг 3 — Изучите дополнительные гармонии (аналогичные, триадные, расщеплённо-комплементарные) и скопируйте значение любого образца.

Когда использовать

• Собрать брендовую палитру вокруг существующего основного цвета, не открывая Adobe Color.
• Подобрать цвет CTA-кнопки, которая будет заметна на фоне страницы.
• Выбрать цвета серий для графика так, чтобы соседние серии оставались различимыми.

Результат

Бренд-дизайнер вводит основной оранжевый #FF8C00 и получает комплементарный синий #0073FF, а также аналогичные тёплые тона #FF4400 и #FFB800 для цельной палитры.

Частые вопросы

Чем отличается комплементарная схема от расщеплённой комплементарной?

Комплементарная — это один цвет ровно напротив на круге (180°). Расщеплённая берёт два цвета, окружающих этот противоположный (150° и 210°). Расщеплённая обычно мягче и легче встраивается в целый интерфейс без раздражения глаза.

Работают ли схемы для очень тёмных или очень бледных базовых цветов?

Схемы на основе оттенка (комплементарная, аналоговая, триадная, расщеплённая комплементарная, тетрадная) вращают только оттенок, насыщенность и светлота сохраняются: бледная база даёт бледных компаньонов, тёмная — тёмных. Монохромная схема намеренно меняет светлоту вокруг вашего оттенка. Если компаньон на основе оттенка кажется блёклым, поднимите насыщенность базы перед генерацией.

Используется художественный круг (RYB) или экранный (RGB)?

Экранный. Противоположность красного (#FF0000) здесь — голубой (#00FFFF), а не зелёный, как в теории масляных красок. Для цифрового дизайна это верная модель; для физического смешивания краски результат покажется странным.

Почему для некоторых баз комплементарный цвет почти не отличается от исходного?

У чистых серых оттенок не определён, вращать нечего вокруг, и возвращается тот же серый. Добавьте к базе хотя бы 5% насыщенности, и комплементарный нормально уйдёт в сторону.

Можно ли выгрузить всю палитру разом?

Да, четырьмя способами. «Скачать палитру» сохранит все образцы и их HEX в обычный текстовый файл. «Скачать CSS» экспортирует палитру как готовые CSS-переменные (например --color-complementary-1: #0099FF;). «Конфиг Tailwind» создаст объект цветов, готовый для вставки в tailwind.config.js. «Изображение PNG» сохранит всю палитру как картинку с подписями — удобно для дизайн-ревью.

Похожие инструменты