Что можно сделать с помощью Цветовой круг
Прежде чем начать, ознакомьтесь с основными возможностями.
- Изучите комплементарные и аналогичные цветовые схемы.
- Находите триадные, тетрадные и квадратные цветовые гармонии
- Копируйте hex-код каждого найденного цвета
- Точно настраивайте насыщенность и светлоту в реальном времени
- Выберите базовый цвет для палитры дизайна
Справочник по настройкам
5 настроек
Доступные элементы управления для Цветовой круг.
Параметры
- Базовый цвет (оттенок и насыщенность)Пипетка цвета
- Перетаскивайте курсор по интерактивному кругу, чтобы выбрать исходный цвет: угол задаёт оттенок, а расстояние от центра — насыщенность.
- HEX / CSS цветТекстовое поле
- Введите или вставьте любой HEX-код, rgb(), hsl() или название цвета CSS, чтобы сразу перевести круг к нужному вам цвету.
- НасыщенностьСлайдерДиапазон: 0–100% · По умолчанию: 91%
- Регулирует насыщенность базового цвета — от полностью серого при 0% до самого чистого и интенсивного варианта оттенка при 100%.
- СветлотаСлайдерДиапазон: 0–100% · По умолчанию: 60%
- Управляет светлотой базового цвета: от чёрного при 0% через чистый оттенок до белого при 100%; все гармонии обновляются соответственно.
- ГармонияПресеты
- Выбирает, какое классическое сочетание цветового круга подсветить: на сопутствующих цветах расставляются метки, чтобы вы видели, как построена схема.Параметры: КомплементарныеРаздельно-комплементарныеАналогичныеТриадическиеТетрадическая (прямоугольная)Квадрат
Сопутствующие инструменты для Цветовой круг
Инструменты для общих следующих шагов после Цветовой круг.
Креатив и дизайн
Генератор цветовых палитр
Создавайте 3–8 цветовых палитр с режимами гармонии, блокируйте и делитесь цветами, а затем экспортируйте переменные PNG, CSS или JSON.
Попробовать сейчасКреатив и дизайн
Значения цветов
Изучите значения цветов, психологию, символику, культурный контекст, примеры брендов и предлагаемые сочетания для любого значения HEX.
Попробовать сейчасРедактирование фотографий и утилиты
Пипетка цвета
Выберите любой пиксель для значений HEX, RGB и HSL или экспортируйте доминирующую палитру как переменные JSON или CSS.
Попробовать сейчасЧасто задаваемые вопросы
Как Цветовой круг помогает вам справиться с задачей
Реальные проблемы, которые он решает каждый день — для бизнеса, авторов и повседневных задач. Найдите вариант использования, который подходит вам, и начните.
Изучите теорию цвета
Смотрите, как все классические цветовые гармонии рассчитываются в реальном времени на основе выбранного вами базового цвета, с понятным объяснением, когда и почему работает каждая схема.
Подберите акцентные цвета для сайта
Введите HEX-код своего бренда в цветовой круг и используйте раздельно-комплементарную или триадную схему, чтобы найти акцентные цвета, которые контрастируют, но не конфликтуют.
Просматривайте цветовые схемы на реальном интерфейсе
Каждая гармония применяется к небольшой карточке-примеру — заголовок, текст, кнопка и точки — чтобы вы могли оценить сочетание цветов в контексте, а не в виде абстрактных образцов.
Палитры для искусства и иллюстраций
Используйте аналоговые гармонии для естественных, спокойных сцен и комплементарные — для драматичных акцентов, копируя точные HEX-коды в свою программу для рисования.
Наблюдайте за каждой трансформацией
Каждая фотография проходит через разделитель без изменений и выходит готовой.


























