Руководство по палитрам и цветовым схемам: от теории цвета до профессионального подбора цветов для UI на практике

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

Цветовая модель HSL

H (Hue) Тон: 0-360°, угол на цветовом круге
S (Saturation) Насыщенность: 0-100%, серый → чистый цвет
L (Lightness) Светлота: 0-100%, чёрный → белый

Значение тона	Цвет
0° / 360°	Красный
60°	Жёлтый
120°	Зелёный
180°	Голубой
240°	Синий
300°	Пурпурный

Цветовой круг

         0° Красный
    300°       60°
   Пурпурный   Жёлтый
  240°         120°
    Синий      Зелёный
        180° Голубой

---

Пять классических цветовых схем

1. Монохромная схема (Monochromatic)

Один тон, разная насыщенность и светлота.

:root {
  --primary-50: hsl(220, 100%, 97%);   /* Очень светло-синий */
  --primary-100: hsl(220, 100%, 94%);
  --primary-200: hsl(220, 100%, 88%);
  --primary-300: hsl(220, 100%, 78%);
  --primary-400: hsl(220, 100%, 68%);
  --primary-500: hsl(220, 100%, 58%);  /* Базовый синий */
  --primary-600: hsl(220, 100%, 48%);
  --primary-700: hsl(220, 100%, 38%);
  --primary-800: hsl(220, 100%, 28%);
  --primary-900: hsl(220, 100%, 18%);  /* Очень тёмно-синий */
}

Применение: Лаконичность, профессионализм, сильный брендинг

2. Аналоговая схема (Analogous)

Соседние цвета в пределах 30° на цветовом круге.

:root {
  --analogous-1: hsl(200, 80%, 50%);  /* Синий */
  --analogous-2: hsl(220, 80%, 50%);  /* Сине-фиолетовый */
  --analogous-3: hsl(240, 80%, 50%);  /* Фиолетовый */
}

Применение: Гармоничность, естественность, теплота

3. Комплементарная схема (Complementary)

Противоположные цвета на 180° на цветовом круге.

:root {
  --primary: hsl(220, 80%, 55%);    /* Синий */
  --complement: hsl(40, 80%, 55%);  /* Оранжевый */
}

Применение: Высокий контраст, привлечение внимания, CTA-кнопки

4. Триадная схема (Triadic)

Три цвета на равном расстоянии 120° на цветовом круге.

:root {
  --triadic-1: hsl(0, 70%, 55%);    /* Красный */
  --triadic-2: hsl(120, 70%, 55%);  /* Зелёный */
  --triadic-3: hsl(240, 70%, 55%);  /* Синий */
}

Применение: Яркость, многоцветность, детские продукты

5. Расщеплённо-комплементарная схема (Split-Complementary)

По 30° с каждой стороны от комплементарного цвета.

:root {
  --primary: hsl(220, 80%, 55%);     /* Синий */
  --split-1: hsl(10, 80%, 55%);      /* Красно-оранжевый */
  --split-2: hsl(50, 80%, 55%);      /* Жёлто-оранжевый */
}

Применение: Разнообразие без хаоса, мягче комплементарной

---

Стандарты контрастности WCAG

Расчёт контрастности

Контрастность = (L1 + 0,05) / (L2 + 0,05)

L1 = Относительная яркость более светлого цвета
L2 = Относительная яркость более тёмного цвета

Расчёт относительной яркости:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
(R/G/B необходимо сначала линеаризовать в sRGB)

Стандарт WCAG 2.1

Уровень	Основной текст	Крупный текст	Компоненты UI
AA	4,5:1	3:1	3:1
AAA	7:1	4,5:1	-

Крупный текст: ≥18pt (24px) или ≥14pt жирный

Проверка контрастности с помощью JavaScript

function getContrastRatio(color1: string, color2: string): number {
  const l1 = getRelativeLuminance(color1);
  const l2 = getRelativeLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

function getRelativeLuminance(hex: string): number {
  const rgb = hexToRgb(hex);
  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255]
    .map(c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function meetsWcagAA(fg: string, bg: string, isLargeText = false): boolean {
  const ratio = getContrastRatio(fg, bg);
  return isLargeText ? ratio >= 3 : ratio >= 4.5;
}

---

Создание профессиональных палитр

Цветовые шкалы в стиле Tailwind CSS

function generatePalette(baseHue: number, baseSat: number) {
  const lightnesses = [97, 94, 88, 78, 68, 58, 48, 38, 28, 18];
  return lightnesses.map((l, i) => ({
    name: `${(i) * 100}`,
    value: `hsl(${baseHue}, ${baseSat}%, ${l}%)`,
  }));
}

// Генерация синей палитры
const bluePalette = generatePalette(220, 80);
// 50: hsl(220, 80%, 97%)
// 100: hsl(220, 80%, 94%)
// ...
// 900: hsl(220, 80%, 18%)

Цветовое пространство OKLCH (более равномерное)

/* OKLCH перцептивно более равномерно, чем HSL */
:root {
  --blue-50: oklch(97% 0.01 250);
  --blue-500: oklch(62% 0.19 250);
  --blue-900: oklch(30% 0.12 250);
}

Цветовое пространство	Перцептивная однородность	Поддержка браузерами
HSL	❌ Неоднородное	Все
OKLCH	✅ Однородное	Chrome 111+, Safari 15.4+
OKLAB	✅ Однородное	Chrome 111+, Safari 15.4+

---

Цветовые схемы в тёмном режиме

/* Светлый режим */
:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --text: #1f2937;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
}

/* Тёмный режим: не просто инвертировать, а снизить контрастность */
[data-theme="dark"] {
  --bg: #111827;
  --surface: #1f2937;
  --text: #f9fafb;
  --text-secondary: #9ca3af;
  --border: #374151;
}

Принципы цветовых схем в тёмном режиме

1. Не использовать чисто чёрный #000: Использовать тёмно-серые оттенки вроде #111827
2. Снизить насыщенность основного цвета: Высокая насыщенность в тёмном режиме режет глаза
3. Сохранять контрастность ≥ 4,5:1: Стандарт WCAG AA
4. Заменить тени более тёмными фоновыми слоями: Тени не видны в тёмном режиме

---

Справочник классических палитр

Технологии/SaaS

Основной цвет: #3b82f6 (Синий 500)
Вторичный цвет: #8b5cf6 (Фиолетовый 500)
Акцент: #06b6d4 (Бирюзовый 500)
Фон: #f8fafc
Текст: #0f172a

Электронная коммерция/Потребительские

Основной цвет: #f97316 (Оранжевый 500)
Вторичный цвет: #ef4444 (Красный 500)
Акцент: #22c55e (Зелёный 500)
Фон: #ffffff
Текст: #1f2937

Финансы/Профессиональные

Основной цвет: #1e40af (Синий 800)
Вторичный цвет: #059669 (Зелёный 600)
Акцент: #d97706 (Янтарный 600)
Фон: #f9fafb
Текст: #111827

---

Генерация цветовых схем с помощью ToolsKu

1. Откройте инструмент конвертации цветов или генератор градиентов
2. Выберите базовый цвет
3. Автоматически сгенерируйте цветовую шкалу (50-900)
4. Проверьте, соответствует ли контрастность WCAG AA
5. Предпросмотр эффекта в тёмном режиме
6. Скопируйте код CSS-переменных

---

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

Почему моя цветовая схема выглядит «грязно»?

HSL имеет непоследовательное восприятие насыщенности при высокой/низкой светлоте. Используйте цветовое пространство OKLCH для более чистых цветовых шкал.

В тёмном режиме цвета слишком режут глаза?

Снизьте насыщенность на 20-30%, увеличьте светлоту на 5-10%:

/* Светлый режим */
--primary: hsl(220, 80%, 55%);

/* Тёмный режим: снизить насыщенность */
--primary: hsl(220, 60%, 65%);

Как обеспечить дружественность к дальтоникам?

• Не полагаться только на цвет для передачи информации (добавить значки/текст)
• Красно-зелёная схема не подходит для дальтоников, используйте сине-оранжевую альтернативу
• Протестируйте с помощью симулятора дальтонизма

---

Итоги

Хорошая цветовая схема создаётся на основе теории цвета + стандартов контрастности + практического тестирования. Освоение пяти классических цветовых схем, стандартов контрастности WCAG и цветового пространства OKLCH позволит создавать профессиональные палитры. Помните: подбор цветов — это не искусство, а инженерия — есть стандарты, которых нужно придерживаться, и инструменты для измерения.