Генерация палитры цветов Создание полной палитры из одного шестнадцатеричного кода

У вас есть шестнадцатеричный код бренда. Возможно, он взят из логотипа, руководства по стилю или просто из любимого цвета. Теперь вам нужно полное разнообразие цветов — оттенки, тонировки, дополнительные цвета, семантические токены, варианты для темного режима. Этот гайд подробно описывает, как правильно и программно построить такую палитру.

Цветовая теория, которая действительно важна

Большинство цветовых теорий, которые вы встретите в учебных заведениях по дизайну, не переводятся напрямую на работу с интерфейсами. Вот то, что действительно работает:

Для большинства библиотек UI вы будете использовать цвет бренда как основной, аналоговый сосед как вторичный, а дополнительный или разделённо-дополнительный оттенок — как акценты и состояния взаимодействия.

Почему HSL превосходит HEX при работе с палитрами

HEX и RGB кодируют цвет как каналы аппаратного обеспечения — не как воспринимаемый человеком цвет. HSL (оттенок, насыщенность, яркость) отражает восприятие человека:

• Оттенок — сам цвет (0–360°, где 0 = красный, 120 = зелёный, 240 = синий)
• Насыщенность — насколько яркий или серый (0% = серый, 100% = полный цвет)
• Яркость — насколько светлый или тёмный (0% = чёрный, 100% = белый)

Это важно, потому что для создания оттенка вашего бренда цвета вы не смешиваете его с белым — вы увеличиваете яркость в HSL. Оттенок остаётся неизменным. Это не гарантируется при математическом смешивании значений HEX.

Правильный способ генерации оттенков и тонов

Неправильный способ — распространённый: линейно интерполировать HEX к #ffffff для оттенков, к #000000 для тонов. Это приводит к смещению оттенков и десатурации — ваш «светло-синий» превращается в мутный серо-синий.

Правильный способ: разобрать HEX на HSL, затем изменять только яркость:

/**
 * Generate a 10-step shade scale from a base HSL color.
 * Returns shades from 50 (lightest) to 950 (darkest), like Tailwind.
 * @param {number} h - Hue (0–360)
 * @param {number} s - Saturation (0–100)
 * @param {number} l - Base lightness (0–100)
 * @returns {Object} - Scale object: { 50, 100, 200, ..., 900, 950 }
 */
function generateShadeScale(h, s, l) {
  // Lightness stops mapped to Tailwind-style scale keys
  const stops = [
    [50,  95],
    [100, 90],
    [200, 80],
    [300, 70],
    [400, 60],
    [500, l],   // 500 = your base color
    [600, 40],
    [700, 30],
    [800, 20],
    [900, 12],
    [950, 7],
  ];

  const scale = {};
  for (const [key, lightness] of stops) {
    scale[key] = `hsl(${h}, ${s}%, ${lightness}%)`;
  }
  return scale;
}

// Example: brand color #3b82f6 (Tailwind blue-500)
// HSL ≈ hsl(217, 91%, 60%)
const palette = generateShadeScale(217, 91, 60);
// palette[50]  → "hsl(217, 91%, 95%)" — near-white blue tint
// palette[500] → "hsl(217, 91%, 60%)" — brand color
// palette[900] → "hsl(217, 91%, 12%)" — near-black blue shade

Ключевое понимание: оттенок и насыщенность остаются неизменными на всей шкале. Изменяется только яркость. Это создаёт визуально согласованную шкалу, которая воспринимается как один и тот же цветовой семейство на всех уровнях.

Нужно генерировать это из HEX? Используйте бесплатный Экстрактор цветовой палитры для извлечения значений HSL из любого цвета мгновенно.

50–950 шкала системы дизайна

Tailwind популяризировал 11-уровневую шкалу (50, 100–900, 950). Она стала стандартом в системах дизайна, потому что корректно отображает различные случаи использования:

• 50–100: Фон страницы, состояния наведения на светлых поверхностях
• 200–300: Границы, тонкие разделители, состояния отключенных элементов
• 400–500: Взаимодействующие элементы — кнопки, ссылки, кольца фокуса
• 600–700: Состояния наведения/активности для взаимодействующих элементов
• 800–900: Текст на светлых фонах
• 950: Приблизительно чёрный цвет для высококонтрастных заголовков

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

От бренда HEX до полной рабочей палитры

Вот практическая последовательность действий, когда у вас есть один HEX-код бренда:

1. Разобрать на HSL. Конвертировать #1d4ed8 → hsl(221, 74%, 48%)
2. Создать основную шкалу. Применить функцию тонов, как описано выше, для полной 11-уровневой шкалы.
3. Получить вторичный цвет. Повернуть оттенок ±30° для получения аналогового вторичного цвета: hsl(251, 74%, 48%) (пурпурно-синий).
4. Получить акцент. Повернуть оттенок на 180° для получения дополнительного цвета: hsl(41, 74%, 48%) (амбер).
5. Создать шкалы для всех трёх цветов. То же самое функции тонов, но с разными входными оттенками.

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

Семантические цветовые токены

Примитивные значения шкалы предназначены для базовых элементов палитры. Семантические токены — это то, что на самом деле используют компоненты:

const tokens = {
  // Map scale values to semantic names
  'color-primary':         palette[500],  // brand color
  'color-primary-hover':   palette[600],
  'color-primary-subtle':  palette[50],
  'color-text':            palette[900],
  'color-text-muted':      palette[600],
  'color-border':          palette[200],
  'color-bg':              palette[50],

  // Status colors — separate scales per semantic group
  'color-success':         'hsl(142, 71%, 45%)',
  'color-warning':         'hsl(38, 92%, 50%)',
  'color-danger':          'hsl(0, 84%, 60%)',
};

Эта раздельность делает темный режим управляемым. Компоненты ссылаются на color-text, а не palette[900]. В темном режиме вы просто переподключаете токен — не каждый компонент.

Тёмный режим: инверсия шкалы

Хорошо построенная палитра HSL почти автоматически инвертируется. Правило: поменять светлые и тёмные концы шкалы, и немного скорректировать середины для баланса восприятия.

// Light mode
const lightTokens = {
  'color-bg':    palette[50],   // near-white background
  'color-text':  palette[900],  // near-black text
  'color-border': palette[200],
};

// Dark mode — same scale, inverted stops
const darkTokens = {
  'color-bg':    palette[950],  // near-black background
  'color-text':  palette[50],   // near-white text
  'color-border': palette[800],
};

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

Сборка всей системы

Начиная с одного HEX-кода, вы теперь можете сгенерировать полную, семантически названную, темно-режим-готовую палитру менее чем за 50 строк JavaScript. Ключевые шаги:

1. Разобрать HEX → HSL
2. Создать 11-уровневую шкалу яркости, сохраняя оттенок и насыщенность постоянными
3. Получить вторичные и акцентные оттенки путём поворота
4. Сопоставить значения шкалы с семантическими токенами
5. Переподключить токены для темного режима

Для быстрого прототипирования без написания кода самим, используйте Генератор цветовых схем и Экстрактор цветовой палитры для визуального управления всем этим — экспортировать результат в виде CSS-переменных или файла JSON с токенами и вставить его прямо в систему дизайна.

Вам также может понравиться

Проверка схемы JSON: Обнаружение нарушений API-соглашений до их отправки

Читать далее "

Опубликовано 11 мая 2026

Проверка подписи PDF: Что нужно знать разработчикам

Читать далее "

Опубликовано 10 мая 2026

Markdown против HTML: Когда использовать каждый для документов, README-файлов и API

Читать далее "

Опубликовано 9 мая 2026

Параметры UTM: Как отслеживать маркетинговые кампании без догадок

Читать далее "

Опубликовано 8 мая 2026 года