Реклама мешает? Идти Без рекламы Сегодня 

Генератор цветовых схем (комплементарный / триадный / аналогичный)

Разработчик

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Базовый цвет

Color Picker

Шестигранник

Н (Цветовой тон)

Н (Оттенок)

Н (Насыщенность)

Тип гармонии

Тип

Формат экспорта

Формат

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

Генератор цветовых схем

Создавайте гармоничные цветовые палитры, используя теорию цвета. Выберите базовый цвет и тип гармонии — комплементарный, триада, аналоговый, расщепленный комплементарный, тетрадный или монохромный — чтобы мгновенно создать сбалансированную палитру. Визуальные образцы показывают значения в HEX, RGB и HSL. Проверка контрастности WCAG обеспечивает доступность. Экспорт в виде пользовательских CSS свойств, JSON, конфигурации Tailwind или переменных SCSS.

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

Введите базовый цвет с помощью палитры, поля HEX, ползунков RGB или значений HSL — все поля ввода синхронизируются автоматически. Выберите тип гармонии для создания палитры из 3-6 цветов на основе математики теории цвета. Каждый цвет отображается как визуальный образец со значениями HEX, RGB и HSL и кнопкой копирования. Проверьте коэффициенты контрастности WCAG с белым и черным текстом. Экспортируйте всю палитру в предпочитаемом формате.

Возможности

6 типов гармонии — Комплементарный (180°), Триада (120°), Аналоговый (30°), Расщепленный комплементарный (150°/210°), Тетрадный/Квадратный (90°) и Монохромный (вариации насыщенности/светлоты).
Несколько цветовых входов — Встроенная палитра, HEX (#RRGGBB), ползунки RGB и ползунки HSL синхронизируются в реальном времени. Изменение любого поля ввода мгновенно обновляет все остальные.
Визуальное отображение палитры — Большие цветовые образцы со значениями HEX, RGB и HSL для каждого цвета. Копирование любого значения одним кликом.
Проверка контрастности WCAG — Каждый цвет в палитре показывает коэффициент контрастности с белым и черным текстом с метками AA/AAA pass/fail. Гарантирует, что ваши цветовые решения соответствуют стандартам доступности.
4 формата экспорта — Пользовательские CSS свойства (переменные :root), объект JSON, цвета конфигурации Tailwind и переменные SCSS. Скопируйте весь блок экспорта одним кликом.
Обновления в Реальном Времени — Палитра мгновенно регенерируется при любом изменении ввода. Кнопка генерации не требуется.
Расчеты на основе HSL — Все типы гармонии используют математически корректное вращение цветового тона HSL, обеспечивая точные результаты в соответствии с теорией цвета.

Типы цветовой гармонии

Комплементарный: Два цвета, противоположные на цветовом круге (180° друг от друга). Высокий контраст, яркие. Лучше всего подходит для: элементов призыва к действию, смелых дизайнов.
Триада: Три цвета, расположенные на равном расстоянии (120° друг от друга). Сбалансированные, красочные. Лучше всего подходит для: иллюстраций, игривых дизайнов.
Аналоговый: Цвета, соседние на круге (30° друг от друга). Гармоничные, спокойные. Лучше всего подходит для: природных тем, градиентов, целостных дизайнов.
Расщепленный комплементарный: Базовый цвет + два цвета, соседние к его комплементарному (150°/210°). Сильный контраст с меньшим напряжением. Лучше всего подходит для: начинающих, универсальных палитр.
Тетрадный/Квадратный: Четыре цвета с интервалом 90°. Богатые, разнообразные. Лучше всего подходит для: сложных дизайнов с множеством элементов.
Монохромный: Один цветовой тон с разной насыщенностью и светлотой. Элегантный, единый. Лучше всего подходит для: минималистичных дизайнов, тем одного бренда.

Реклама · УДАЛИТЬ?

Что такое цветовая гармония в дизайне?

Цветовая гармония относится к визуально приятным и сбалансированным комбинациям цветов. Эти комбинации производятся из цветового круга — круговой схемы цветов, основанной на их взаимоотношениях по оттенку. Гармоничные цвета создают ощущение порядка и эстетической привлекательности. Основные типы гармонии (комплементарный, триада, аналоговый и т. д.) основаны на геометрических соотношениях на цветовом круге: цвета под определенными углами друг от друга, как правило, хорошо сочетаются. Дизайнеры используют эти соотношения для создания палитр, которые кажутся намеренными и целостными, а не случайными.

Что такое коэффициент контрастности WCAG и почему он важен?

Коэффициент контрастности WCAG (Web Content Accessibility Guidelines) измеряет разницу в яркости между двумя цветами — обычно текстом и его фоном. Соотношение 1:1 означает отсутствие контраста (одинаковый цвет), а 21:1 — максимальный контраст (черный на белом). WCAG AA требует минимум 4,5:1 для обычного текста и 3:1 для крупного текста. WCAG AAA требует 7:1 для обычного текста и 4,5:1 для крупного текста. Соблюдение этих соотношений гарантирует, что люди с нарушениями зрения, дальтонизмом или те, кто просматривает контент в условиях плохой освещенности, смогут читать ваш контент. Многие законы о доступности ссылаются на стандарты WCAG.

Какая разница между цветовыми моделями RGB и HSL?

RGB (красный, зеленый, синий) определяет цвета путем смешивания интенсивности света — каждый канал имеет диапазон от 0 до 255. Именно так экраны отображают цвет, но это не интуитивно для человека. HSL (Hue, Saturation, Lightness — Тон, Насыщенность, Светлота) более интуитивен: Тон — это угол цвета на круге (0-360°), Насыщенность — интенсивность цвета (0-100%), а Светлота — насколько он светлый или темный (0-100%). HSL лучше подходит для расчетов цветовой гармонии, поскольку вращение угла тона напрямую создает гармоничные цвета, тогда как достижение того же в RGB требует сложной математики.

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

Это зависит от ваших целей. Комплементарный (2 цвета) создает высокий контраст и энергию — хорошо подходит для призывов к действию и смелых заявлений. Аналоговый (3 цвета) ощущается спокойно и целостно — идеально подходит для природных тем и спокойных дизайнов. Триада (3 цвета) сбалансирована и ярка — отлично подходит для иллюстраций и игривых брендов. Расщепленный комплементарный — более безопасная версия комплементарного с меньшим визуальным напряжением. Монохромный элегантен и един — идеален для минималистичных дизайнов. Тетрадный предлагает самое большое разнообразие, но требует тщательного баланса. Если сомневаетесь, начните с аналогового или расщепленного комплементарного — они самые прощающие.

Хотите убрать рекламу? Откажитесь от рекламы сегодня

