Генератор цветовой палитры

Схемы гармонии

• Дополнительно: основание + противоположность цветового круга (180°). Высокая контрастность, яркая. Подходит для кнопок призыва к действию на фоне фирменного цвета.
• Аналоговые: 3–5 оттенков в пределах 30° друг от друга. Спокойная, гармоничная, обычно теплая или прохладная семья. Подходит для фонов и иллюстраций на одну семейную тему.
• Триадный: 3 оттенка, расположенных на равном расстоянии (120°). Яркий и сбалансированный. Часто встречается в детских товарах и ярких брендах.
• Сплит-дополнение: основа + два оттенка по бокам дополнения (150° и 210°). Более богатый, чем дополнительный, менее напряженный.
• Тетрадический/квадратный: 4 оттенка под углом 90°. Сложнее сбалансировать — выберите один доминирующий.
• Монохроматический: один оттенок, различная насыщенность и яркость. Элегантный и сплоченный; не имеет акцента, если не сочетается с нейтральным.

Структура палитры для реальной работы

Системы проектирования обычно требуют:

• Основной (базовый бренд)
• Вторичный (поддерживающий бренд)
• Акцент (призыв к действию, выделение)
• Нейтральная гамма (фон, текст, границы — 5–10 оттенков серого)
• Семантика (успех, предупреждение, ошибка, информация)
• Поверхность (фон панели, наложения)

Палитра гармонии дает вам первичное + вторичное + акцент. Нейтральные цвета и семантика обычно происходят из отдельных соглашений (ненасыщенные, почти серые цвета; стандартизированные семантические оттенки).

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

Пользовательские свойства CSS:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

Конфигурация попутного ветра:

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

СКСС:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

Контраст и доступность

Схемы гармонии не гарантируют доступности. Проверьте пары палитр на соответствие требованиям контрастности WCAG:

• Основной текст на фоне: минимум 4,5:1 (AA).
• Крупный текст: 3:1.
• Нетекст (кнопки, иконки, кольца фокусировки): 3:1.

Соедините генератор с средством проверки контрастности, чтобы найти совместимые комбинации.

Советы

• Начните с определенного базового цвета, а не случайного — гармония кажется целенаправленной, когда основа имеет значение (ваш бренд, понравившаяся фотография, культурная отсылка).
• Проверьте палитру в реальных условиях: на кнопке, на фоне текста, на диаграмме. Хороший внешний вид на образцах не гарантирует работоспособность пользовательского интерфейса.
• Слегка уменьшите насыщенность для палитр, предназначенных для больших поверхностей: полностью насыщенный фон утомляет. – Держите акценты редкими: если 80 % пользовательского интерфейса является основным и второстепенным, используйте акцентный цвет в 10 % точек взаимодействия (CTA) для максимальной привлекательности.