Цветовые палитры

Интерактивный цветовой круг

Перетащи точку по кругу и выбери цвет. Сразу увидишь, какие цвета с ним сочетаются по каждому типу гармонии.

Перетащи точку или нажми на круг

Цвета в этом сочетании

Нажми на цвет, чтобы скопировать его HEX-код.

Попробуй также

Палитра цветов из имениНапиши имя и получи собственную палитру цветовЦветной аквариумРасслабляющий 3D-аквариум в ваших цветахУзор из цветов дня рожденияКлетка и полоски из дней рождения всей семьи
Все бесплатные инструменты →

Что такое цветовой круг

Это круг, в котором цвета расположены по оттенку. Соседние цвета похожи друг на друга, а противоположные контрастируют. Он помогает подобрать сочетания, которые работают в дизайне, интерьере и одежде.

Основные, вторичные и третичные цвета

На экране основные цвета — красный, зелёный и синий (RGB). При смешивании двух получаются вторичные: жёлтый, голубой и пурпурный. Третичные лежат между основным и вторичным, например оранжевый или фиолетовый. В живописи используется классическая модель: красный, жёлтый и синий.

Тёплые и холодные цвета

Тёплые цвета идут от красного до жёлтого и ощущаются энергичными и близкими. Холодные идут от зелёного до фиолетового и придают спокойствие и дистанцию. Один тёплый цвет с несколькими холодными или наоборот создаёт контраст и сохраняет баланс.

Типы цветовых сочетаний

Комплементарные

Два цвета друг напротив друга на круге. Дают наибольший контраст. Пример: синий #2B6CB0 и оранжевый #DD8A2B, идеально для заметной кнопки.

Аналоговые

Три соседних цвета. Выглядят спокойно и гармонично. Пример: зелёный, сине-зелёный и синий, как в пейзаже.

Триадные

Три цвета на равном расстоянии. Живые и сбалансированные. Пример: красный, жёлтый и синий в детской иллюстрации.

Расщеплённые комплементарные

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

Тетрадные

Четыре цвета, образующие прямоугольник или квадрат. Много разнообразия: выбери один как основной, а остальные используй для деталей.

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

Как пользоваться цветовым кругом?

Выбери базовый цвет, перетащив точку, или введи его HEX-код. Затем выбери тип сочетания и скопируй цвета, которые появятся ниже.

Какие цвета сочетаются по цветовому кругу?

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

Почему красный наверху?

Это самая распространённая условность: оттенок 0° — красный, и от него круг продолжается через жёлтый, зелёный, голубой, синий и пурпурный.

Можно использовать эти цвета в Canva или в CSS?

Да. HEX-код каждого цвета копируется одним касанием, или открой сочетание в генераторе палитр и экспортируй его.

Другие гайды и инструменты