Цвет

Как работают цветовые гармонии

Цветовые гармонии основаны на расположении цветов на цветовом круге. Комплементарные цвета находятся напротив друг друга и создают сильный контраст. Аналоговые — рядом, создают мягкие сочетания.

Когда использовать каждый тип

Комплементарный — для акцентов и кнопок. Аналоговый — для фона и интерьера. Триадный — для разнообразных и живых дизайнов. Монохроматический — для минималистичных и элегантных решений.

Основа — модель HSL

Все гармонии рассчитываются в пространстве HSL (Hue, Saturation, Lightness). Это позволяет точно вращать оттенок на нужный угол, сохраняя насыщенность и яркость исходного цвета.

Часто задаваемые вопросы
Что такое комплементарные цвета?
Комплементарные цвета находятся напротив друг друга на цветовом круге — разница в оттенке 180°. Они создают максимальный контраст и хорошо работают для выделения акцентов.
Чем отличается аналоговый от монохроматического?
Аналоговые цвета — соседи по цветовому кругу (±30°), разных оттенков но близкого характера. Монохроматические — один и тот же оттенок, но разной яркости и насыщенности.
Когда использовать триадную гармонию?
Триадная гармония (три цвета через 120°) даёт яркий и разнообразный результат. Подходит для детских брендов, игровых интерфейсов и любых проектов где нужна энергия и динамика.
Инструмент бесплатный?
Да, полностью бесплатно и без ограничений. Все расчёты происходят прямо в браузере, без регистрации.

Другие инструменты

Цвет по фотоЗагрузи фото и кликни в любую точку — получи HEX, RGB, HSL и название Палитра из фотоИзвлекаем 5–8 доминирующих цветов из любого изображения Палитра для проектаПодбери N цветов с гарантированной читаемостью текста Вариации цветаСветлее, темнее, насыщеннее, бледнее, теплее, холоднее Генератор градиентовСоздавай красивые градиенты и копируй готовый CSS-код Контраст WCAGПроверка доступности AA и AAA — бесплатно Симулятор дальтонизмаКак цвета видят люди с протанопией, дейтеранопией и другими типами Tailwind-конвертерБлижайший Tailwind-класс для любого HEX-цвета Конвертер цветовHEX ↔ RGB ↔ HSL ↔ CMYK мгновенно, с копированием кода Цвет по названиюНайди HEX по названию — «терракота», «индиго», «лазурный» CSS Filter для SVGПерекрась SVG-иконки в любой цвет через CSS без редактора Палитры цветовГотовые палитры по темам — клик по цвету копирует HEX