Что такое Цветовой круг?

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

Круг работает в HSL: вы перетаскиваете базовый тон или вводите любой HEX, и соответствующие образцы поворачиваются на свои места в реальном времени. Ползунки насыщенности и светлоты регулируют всю схему одновременно. Каждый сгенерированный цвет копируется как HEX, RGB, HSL, CMYK или OKLCH одним кликом, а круг помечает каждую точку гармонии подписанным кружком, чтобы вы видели связь между цветами.

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

1. Щёлкните или перетащите курсор по цветовому кругу, чтобы выбрать базовый оттенок, или введите конкретное HEX-значение в поле ввода.
2. Выберите тип гармонии (комплементарная, аналогичная, триадная, расщеплённо-комплементарная или тетрадная), чтобы увидеть подходящие цвета, выделенные на круге.
3. Скопируйте любой сгенерированный цвет в формате HEX, RGB, HSL, CMYK или OKLCH, щёлкнув по образцу. Экспортируйте всю палитру для использования в своих дизайн-инструментах.

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

• Подбор трёх-четырёх акцентных цветов для бренд-набора после фиксации основного цвета.
• Выбор цвета кнопки, визуально противоположного фону, для максимального контраста.
• Сборка UI-палитры, где близкие оттенки должны звучать спокойно, а не конфликтовать.

Результат

Веб-дизайнер выбирает #E87040 в качестве фирменного цвета, переключается на триадную гармонию и одним щелчком получает три сбалансированных акцентных цвета для лендинга.

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

В чём разница между аналогичной и триадной гармониями?

Аналогичная берёт соседние цвета на круге (в пределах примерно 30 градусов) и читается как спокойная и единая. Триадная расставляет три цвета через 120 градусов: высокий контраст, сбалансированная схема, придающая дизайну энергию.

Когда выбирать комплементарную вместо разделённой комплементарной?

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

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

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

Можно ли получить палитру в виде CSS-переменных или формата дизайн-инструментов?

Кликните по любой плашке, чтобы скопировать HEX, RGB, HSL, CMYK или OKLCH в буфер обмена. Оттуда копия уходит прямо в CSS-файл (--brand-primary: #E87040), в hex-поле Figma или в настройки цветов Tailwind, где бы вы ни работали.

Тетрадическая гармония это то же самое, что прямоугольная?

Да. Тетрадическая (она же прямоугольная) выбирает четыре цвета, образующие прямоугольник на круге: две комплементарные пары. Палитра богаче, но один тон должен быть доминирующим, иначе дизайн получается перегруженным.

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