Генератор оттенков Tailwind: создание пользовательских цветовых шкал

Tailwind CSS поставляется с тщательно разработанной цветовой палитрой: 22 оттенка, каждый с 11 уровнями от 50 до 950. Она охватывает подавляющее большинство случаев использования — но как только вам нужен конкретный синий вашего бренда или фиолетовый, точно совпадающий с логотипом компании, встроенной палитры недостаточно.

Именно здесь генератор оттенков становится незаменимым. Вы предоставляете один цвет — основной цвет бренда, акцент, семантический цвет, — а генератор выдаёт полную шкалу от 50 до 950, отформатированную точно как объект конфигурации Tailwind CSS, готовый к вставке в tailwind.config.js.

В этом руководстве объясняется, как работает шкала оттенков Tailwind, как генерировать пользовательские шкалы с помощью Генератора оттенков ColorFYI и как настраивать Tailwind для их эффективного использования, включая тёмный режим.

Как работает шкала оттенков Tailwind

Цветовая шкала Tailwind построена вокруг 11-шаговой числовой системы:

50  100  200  300  400  500  600  700  800  900  950

Каждый шаг представляет уровень перцептивной светлоты:

50 — самый светлый: почти белый, лишь намёк на цвет
500 — «чистый» цвет: полностью насыщенный, средняя светлота
950 — самый тёмный: почти чёрный, глубокий тинт

Числа не произвольны. Они расположены так, чтобы создавать примерно равные перцептивные скачки светлоты. Разрыв между 100 и 200 выглядит для глаза примерно так же, как разрыв между 700 и 800.

Почему 11 шагов?

11 шагов обеспечивают достаточную детализацию для охвата всех распространённых случаев использования в UI:

Оттенок	Основное применение
50	Фоны страниц и секций, тонкие тинты
100	Фоны при наведении для ghost/outline-элементов
200	Фоны отключённых состояний, тонкие рамки
300	Декоративные рамки, тонкие разделители
400	Текст-заполнитель, вторичный цвет иконок
500	Базовый цвет — залитые кнопки, ссылки
600	Состояние наведения для залитых интерактивных элементов
700	Активное/нажатое состояние, доступный текст на светлых фонах
800	Тёмный текст на цветных фонах, акцентный текст
900	Заголовки, высококонтрастный текст
950	Почти чёрные тинты, максимально контрастный текст

Эта система означает, что каждый цвет Tailwind работает как мини-дизайн-система сам по себе. Нужен белый текст, читаемый на залитой кнопке, — используйте -600. Нужен едва заметный фоновый тинт — используйте -50.

Подробнее о шкале 50–950

Рассмотрим конкретный пример на основе встроенной шкалы violet Tailwind:

Оттенок	Hex	Светлота RGB (L в OKLCH)
violet-50	#F5F3FF	~98%
violet-100	#EDE9FE	~95%
violet-200	#DDD6FE	~89%
violet-300	#C4B5FD	~80%
violet-400	#A78BFA	~70%
violet-500	#8B5CF6	~57%
violet-600	#7C3AED	~48%
violet-700	#6D28D9	~40%
violet-800	#5B21B6	~33%
violet-900	#4C1D95	~26%
violet-950	#2E1065	~15%

Обратите внимание, что базовый цвет violet-500 находится примерно на 57% светлоты — не точно в середине диапазона 0–100%, а чуть выше средней точки для визуальной сбалансированности шкалы. Очень тёмные оттенки сжимаются в более узком диапазоне светлоты (15–40%), потому что человеческий глаз менее точно различает различия светлоты в тёмной области.

Генерация пользовательских цветовых шкал

Использование Генератора оттенков ColorFYI

Генератор оттенков принимает любой hex-код и выдаёт полную шкалу, отформатированную для Tailwind. Вот рабочий процесс:

Шаг 1: Введите цвет вашего бренда в поле ввода.

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

Шаг 2: Генератор вычисляет все 11 оттенков с помощью перцептивно равномерного алгоритма, показывая hex-код и визуальный предпросмотр каждого шага.

Шаг 3: Скопируйте сгенерированный блок конфигурации Tailwind.

Вывод для #0057B8 выглядит приблизительно следующим образом:

brand: {
  50:  '#E6F0FF',
  100: '#CCE1FF',
  200: '#99C3FF',
  300: '#66A4FF',
  400: '#3386FF',
  500: '#0057B8',  // Ваш входной цвет, закреплённый на 500
  600: '#0049A3',
  700: '#003B8A',
  800: '#002D6B',
  900: '#001F4D',
  950: '#001230',
},

Что означает «якорение»

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

Некоторые генераторы позволяют закрепиться на другой позиции. Если цвет вашего бренда уже очень тёмный темно-синий, якорение на 700 или 800 может создать более полезный диапазон. Если это очень светлый пастельный цвет, лучше подойдёт якорение на 200 или 300. Генератор оттенков позволяет настроить точку закрепления.

Почему перцептивная равномерность важна

Наивный генератор оттенков может просто уменьшать значение L в HSL на равные приращения: 95%, 85%, 75%, 65%, 55%, 45%, 35%, 25%, 15%. Математика проста, но визуальный результат неравномерен. Переходы в светлом конце шкалы выглядят дальше расположенными, чем в тёмном, — потому что зрение человека более чувствительно к различиям светлоты в средних тонах.

Генератор ColorFYI использует интерполяцию светлоты OKLCH, которая создаёт шаги, визуально равноудалённые — соответствующие перцептивному качеству ручных стандартных шкал Tailwind.

Настройка tailwind.config.js

Расширение пользовательским цветом

Самый безопасный способ добавить пользовательскую цветовую шкалу — расширить стандарты Tailwind, а не заменять их:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#E6F0FF',
          100: '#CCE1FF',
          200: '#99C3FF',
          300: '#66A4FF',
          400: '#3386FF',
          500: '#0057B8',
          600: '#0049A3',
          700: '#003B8A',
          800: '#002D6B',
          900: '#001F4D',
          950: '#001230',
        },
      },
    },
  },
}

После добавления можно использовать классы bg-brand-500, text-brand-700, border-brand-200 и hover:bg-brand-600 по всему проекту.

Замена встроенного цвета

Если вы хотите полностью заменить стандартный цвет (например, заменить blue Tailwind на синий цвет бренда):

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50:  '#E6F0FF',
          // ... до 950
        },
      },
    },
  },
}

Классы bg-blue-500, text-blue-700 теперь будут использовать вашу пользовательскую шкалу вместо встроенного синего Tailwind.

Использование CSS-переменных для рантаймовой тематизации

Для приложений, которым нужна рантаймовая смена темы (например, white-label продукты, настраиваемые пользователем темы), определите шкалу как CSS-переменные:

/* globals.css */
:root {
  --color-brand-50:  #E6F0FF;
  --color-brand-100: #CCE1FF;
  --color-brand-200: #99C3FF;
  --color-brand-300: #66A4FF;
  --color-brand-400: #3386FF;
  --color-brand-500: #0057B8;
  --color-brand-600: #0049A3;
  --color-brand-700: #003B8A;
  --color-brand-800: #002D6B;
  --color-brand-900: #001F4D;
  --color-brand-950: #001230;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  'var(--color-brand-50)',
          100: 'var(--color-brand-100)',
          // ... до 950
        },
      },
    },
  },
}

Изменение CSS-переменных во время выполнения (через JavaScript) мгновенно перекрашивает весь UI.

Конфигурация Tailwind v4

Tailwind CSS v4 переносит конфигурацию полностью в CSS, используя @theme:

@import "tailwindcss";

@theme {
  --color-brand-50:  #E6F0FF;
  --color-brand-100: #CCE1FF;
  --color-brand-200: #99C3FF;
  --color-brand-300: #66A4FF;
  --color-brand-400: #3386FF;
  --color-brand-500: #0057B8;
  --color-brand-600: #0049A3;
  --color-brand-700: #003B8A;
  --color-brand-800: #002D6B;
  --color-brand-900: #001F4D;
  --color-brand-950: #001230;
}

tailwind.config.js не нужен. Переменные --color-brand-* автоматически доступны как утилитарные классы (bg-brand-500, text-brand-700 и т.д.).

Оттенки для тёмного режима

Тёмный режим не инвертирует цветовую шкалу — он меняет местами используемые оттенки. Одна и та же шкала работает как для светлого, так и для тёмного режима; нужно лишь поменять, какой конец шкалы используется для фонов, а какой — для текста.

Принцип инверсии

Роль	Светлый режим	Тёмный режим
Фон страницы	brand-50	brand-950
Фон поверхности/карточки	brand-100	brand-900
Тонкая рамка	brand-200	brand-800
Приглушённый текст	brand-400	brand-600
Основной текст	brand-700	brand-300
Текст заголовка	brand-900	brand-100
Залитая кнопка	brand-500	brand-500
Наведение на кнопку	brand-600	brand-400

Цвет залитой кнопки (brand-500) одинаков в обоих режимах — это якорная точка. Всё вокруг неё переворачивается: светлые фоны становятся тёмными, тёмный текст становится светлым.

Реализация с тёмным режимом Tailwind

<!-- Фон: light-50 в светлом, dark-950 в тёмном -->
<div class="bg-brand-50 dark:bg-brand-950">

  <!-- Карточка: light-100 в светлом, dark-900 в тёмном -->
  <div class="bg-brand-100 dark:bg-brand-900 rounded-lg p-6">

    <!-- Заголовок: тёмный-900 в светлом, светлый-100 в тёмном -->
    <h2 class="text-brand-900 dark:text-brand-100">Заголовок карточки</h2>

    <!-- Основной текст: тёмный-700 в светлом, светлый-300 в тёмном -->
    <p class="text-brand-700 dark:text-brand-300">Содержимое карточки.</p>

    <!-- Кнопка: всегда brand-500, направление наведения меняется по режиму -->
    <button class="bg-brand-500 hover:bg-brand-600 dark:hover:bg-brand-400 text-white">
      Действие
    </button>

  </div>
</div>

Генерация отдельной тёмной палитры

Для некоторых дизайн-систем — особенно с значительным визуальным различием между светлым и тёмным режимом — может понадобиться отдельная «тёмная» шкала. Это может быть:

Слегка более тёплая или холодная версия того же оттенка (более насыщенная для тёмного режима, поскольку тёмные фоны требуют более насыщенных цветов для визуальной эквивалентности)
Дополняющий оттенок, лучше работающий на тёмных фонах

Сгенерируйте обе шкалы с помощью Генератора оттенков и определите их как отдельные токены:

:root {
  /* Шкала светлого режима */
  --color-brand-500: #0057B8;
}

[data-theme="dark"] {
  /* Шкала тёмного режима (чуть более насыщенная) */
  --color-brand-500: #3386FF;
}

Распространённые сценарии пользовательских шкал

Точное соответствие цвету бренда

Многие брендбуки указывают один Pantone или hex-код. Если цвет вашего бренда — #E63946 (яркий красный), сгенерируйте шкалу с якорем на 500. Ваш фирменный красный становится brand-500, и вы получаете полный диапазон для дизайнерской гибкости.

Добавление тёплого нейтрального серого

Стандартные серые шкалы в Tailwind холодноватые. Чтобы создать тёплый серый, гармонирующий с оранжевым или красным основным цветом, сгенерируйте шкалу оттенков для ненасыщенного тёплого цвета наподобие #8B7355, а затем используйте его как нейтральный серый. Лёгкая теплота создаёт визуальную согласованность с основным цветом.

Создание семантических цветовых шкал

Ваша дизайн-система, вероятно, нуждается в семантических шкалах:

Успех: сгенерируйте из зелёного наподобие #16A34A
Предупреждение: сгенерируйте из янтарного наподобие #D97706
Ошибка/Опасность: сгенерируйте из красного наподобие #DC2626
Информация: сгенерируйте из небесно-синего наподобие #0284C7

Каждая становится именованной шкалой в вашей конфигурации (success, warning, error, info) наряду с шкалами primary и neutral вашего бренда.

Основные выводы

Система оттенков Tailwind 50–950 предоставляет 11 перцептивно равноудалённых шагов светлоты — от почти белого до почти чёрного, охватывающих каждый UI-сценарий.
Генератор оттенков ColorFYI конвертирует любой единственный hex-код в полную шкалу, готовую для Tailwind, используя перцептивно равномерный алгоритм.
Расширяйте tailwind.config.js через theme.extend.colors для добавления пользовательских шкал без потери стандартов Tailwind; используйте @theme в Tailwind v4.
Используйте CSS-переменные (var(--color-brand-500)) для рантаймовой смены темы и white-label приложений.
Тёмный режим не требует другого цвета — он использует ту же инвертированную шкалу: светлые оттенки становятся фонами, тёмные — текстом.
Генерируйте отдельные шкалы для основного, нейтрального/серого и семантических (success, warning, error, info) цветов для построения полной дизайн-системы.
Последовательно используйте числовое соглашение об именовании, чтобы разработчики точно знали, какой оттенок использовать: 600 для состояний наведения, 700 для доступного текста на белом, 100 для тонких фонов.