Цвета Tailwind CSS: полное руководство по системе оттенков

Tailwind CSS поставляется с одной из наиболее широко используемых систем цвета в веб-разработке. Соглашение о наименовании оттенков — числа от 50 до 950 — стало отраслевым стандартом, влияющим на дизайн-инструменты, другие CSS-фреймворки и пользовательские дизайн-системы далеко за пределами проектов, реально использующих Tailwind. Понимание структуры этой системы, способов её расширения и того, как она эволюционировала в Tailwind v4, даёт и практические навыки, и ментальную модель для проектирования цветовых шкал.

Обзор стандартной палитры

Стандартная палитра Tailwind содержит 22 семейства цветов, каждое с 11 оттенками (от 50 до 950). Несколько отдельных цветов — black, white, transparent и inherit — также доступны как одиночные утилиты.

Основные семейства цветов стандартной палитры:

Серые семейства (slate, gray, zinc, neutral, stone) различаются главным образом своим подтоном. slate имеет сине-серый оттенок, stone тяготеет к тёплому, а neutral — наиболее чисто ахроматический. Выбор правильного серого семейства для проекта важнее, чем многие разработчики осознают: серые slate выглядят иначе, чем серые stone в полноценном UI.

Соглашение о наименовании оттенков: 50–950

Система нумерации следует последовательному правилу: большие числа темнее. Шкала не является идеально линейной — команда Tailwind вручную настраивала шаги для перцептивной равномерности, а не математической, — но связь надёжна:

Стандартный blue-500 Tailwind — это #3B82F6 — средний, полностью насыщенный синий, являющийся «каноническим» синим Tailwind. blue-600 (#2563EB) — стандартное состояние наведения для синей кнопки. blue-100 (#DBEAFE) — фон синего бейджа. Эти соотношения последовательны для всех семейств цветов в палитре.

Добавление оттенка 950

Tailwind v3.3 добавил оттенок 950 для каждого семейства цветов. До этого добавления 900 был наиболее тёмным вариантом, что было слишком светлым для фонов тёмного режима в некоторых семействах цветов. Оттенки 950 заполнили этот пробел — они очень тёмные, но сохраняют видимый оттенок родительского цвета. Например, blue-950 (#172554) читается как тёмно-синий, а не чистый чёрный, что делает его полезным для поверхностей тёмного режима, сохраняющих характер бренда.

Добавление пользовательских цветов

Для проектов с фирменными цветами, не охваченными стандартной палитрой, конфигурация Tailwind позволяет добавлять пользовательские семейства цветов. Подход отличается в Tailwind v3 и v4.

Tailwind v3: tailwind.config.js

В v3 пользовательские цвета помещаются в объект extend.colors для добавления рядом со стандартными или в объект colors для их замены:

// tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        // Добавление пользовательского семейства фирменных цветов
        brand: {
          50:  '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',  // Основной фирменный цвет
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
        // Или ссылка на существующее семейство под новым именем
        primary: colors.indigo,
        danger: colors.red,
      },
    },
  },
};

После этой конфигурации можно использовать классы bg-brand-500, text-brand-700, border-brand-200 и т.д.

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

Сложная часть добавления пользовательского цвета — генерация полной шкалы из 11 оттенков из одного hex-значения бренда. Ручная работа — поочерёдная настройка светлоты для каждого шага — даёт непоследовательные результаты.

Генератор оттенков автоматизирует это: введите основной hex вашего бренда, и инструмент вычислит полную шкалу 50–950 с перцептивно равномерными шагами, выводя значения, готовые к вставке в конфигурацию Tailwind. Например, если основной цвет вашего бренда — #0EA5E9 (небесно-синий), генератор создаёт полную шкалу из 11 оттенков, откалиброванную под кривую светлоты нативных палитр Tailwind.

Использование withOpacityValue для динамической прозрачности

В Tailwind v3 цветовые утилиты поддерживают произвольную прозрачность через синтаксис с косой чертой (bg-blue-500/50 для 50% прозрачности). При определении пользовательских цветов в v3 это можно обеспечить, используя CSS-переменные с паттерном withOpacityValue:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: 'rgb(var(--color-brand-500) / <alpha-value>)',
        },
      },
    },
  },
};

Затем определите значения каналов в CSS:

:root {
  --color-brand-500: 14 165 233; /* Значения R G B для #0EA5E9 */
}

Это позволяет bg-brand-500/30 (30% прозрачности) корректно работать в генерируемом CSS.

Расширение палитры в конфигурации

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

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

Один подход: определить фирменные цвета как семантические псевдонимы, ссылающиеся на палитру:

// tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        secondary: colors.violet,
        success: colors.green,
        warning: colors.amber,
        danger: colors.red,
        neutral: colors.slate,
      },
    },
  },
};

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

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

Для дизайн-систем, где нужны именованные цвета без полной шкалы:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary':    '#0EA5E9',
        'brand-secondary':  '#7C3AED',
        'text-on-primary':  '#FFFFFF',
        'surface-dark':     '#0F172A',
      },
    },
  },
};

Используйте их как bg-brand-primary, text-text-on-primary и т.д.

Tailwind v4: подход через CSS-переменные

Tailwind v4 вводит принципиально иную модель конфигурации. Вместо JavaScript-файла конфигурации вся дизайн-система определяется в CSS с помощью пользовательских свойств и CSS-конфигурации.

Директива @theme

В Tailwind v4 цвета определяются директивой @theme в вашем CSS-файле:

@import "tailwindcss";

@theme {
  /* Переопределение или расширение стандартной палитры */
  --color-brand-50:   #f0f9ff;
  --color-brand-100:  #e0f2fe;
  --color-brand-200:  #bae6fd;
  --color-brand-300:  #7dd3fc;
  --color-brand-400:  #38bdf8;
  --color-brand-500:  #0ea5e9;
  --color-brand-600:  #0284c7;
  --color-brand-700:  #0369a1;
  --color-brand-800:  #075985;
  --color-brand-900:  #0c4a6e;
  --color-brand-950:  #082f49;
}

Tailwind v4 считывает пользовательские свойства --color-* и автоматически генерирует соответствующие утилитарные классы: bg-brand-500, text-brand-700, border-brand-200 и т.д.

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

Подход v4 делает семантические псевдонимы цветов исключительно чистыми, поскольку использует стандартные CSS-переменные:

@import "tailwindcss";

@theme {
  --color-primary:           var(--color-blue-600);
  --color-primary-hover:     var(--color-blue-700);
  --color-primary-subtle:    var(--color-blue-50);

  --color-success:           var(--color-green-600);
  --color-danger:            var(--color-red-600);
  --color-warning:           var(--color-amber-500);
}

Теперь bg-primary — допустимый класс Tailwind. А поскольку он ссылается на CSS-переменную, его можно переопределить в блоке тёмного режима или селекторе темы без изменения конфигурации Tailwind:

[data-theme="dark"] {
  --color-primary: var(--color-blue-400);
}

Это наиболее значительное улучшение системы цветов v4: тематизация — это чистый CSS, без шага сборки для переключения тем.

Цвета P3 и OKLCH в v4

Стандартная палитра Tailwind v4 внутренне использует значения OKLCH для перцептивной равномерности. Палитра в v4 создаёт более визуально последовательные шаги по оттенкам — особенно заметно для тёплых цветов, таких как оранжевый и жёлтый, где более ранние палитры имели неравномерные шаги светлоты.

При использовании Конвертера цветов для генерации значений OKLCH для фирменных цветов их можно напрямую поместить в блок @theme:

@theme {
  /* Фирменный цвет в OKLCH для поддержки широкогаммных дисплеев P3 */
  --color-brand-500: oklch(60% 0.18 220);
}

Современные браузеры на широкогаммных дисплеях (большинство MacBook, iPhone) будут отрисовывать это в цветовом пространстве P3 — давая заметно более насыщенный синий, чем эквивалент, ограниченный sRGB.

Практические советы по выбору цветов

Эффективное сочетание семейств

Серые семейства Tailwind разработаны для дополнения конкретных акцентных цветов. Распространённые сочетания:

• slate + blue/indigo — холодный, корпоративный, слегка технологичный
• stone + amber/orange — тёплый, ремесленный, человечный
• zinc + violet/purple — нейтральный, современный, слегка тёмный
• neutral + any — наиболее универсальный серый, работает со всем

Смешивание серых из разных семейств в одном UI (например, slate-100 для одного фона и zinc-200 для другого) создаёт тонкую визуальную непоследовательность. Придерживайтесь одного серого семейства в рамках проекта.

Правило 100/700 для текста на фоне

Надёжная контрастно-безопасная комбинация в Tailwind: используйте текст оттенка 700 на фоне оттенка 100 в пределах одного семейства. Например, text-blue-700 на bg-blue-100 создаёт читаемый синий бейдж, проходящий WCAG AA. Используйте Проверку контраста для верификации нестандартных комбинаций.

Сопоставление оттенков для тёмного режима

Распространённый паттерн для тёмного режима в Tailwind — инвертировать шкалу оттенков: то, что было 700 в светлом режиме, становится 300 в тёмном:

<p class="text-gray-700 dark:text-gray-300">
  Основной текст — тёмно-серый в светлом режиме, светло-серый в тёмном
</p>

<div class="bg-gray-100 dark:bg-gray-800">
  Тонкий фон — едва серый в светлом, тёмная поверхность в тёмном
</div>

Такая симметрия работает, потому что шкала Tailwind устроена так, что 100+900=1000 и 200+800=1000 — пары оттенков зеркальны по воспринимаемой светлоте.

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

• 22 семейства цветов Tailwind охватывают 11 оттенков от 50 (почти белый) до 950 (почти чёрный), где 500 является «идентификационным» оттенком, а 600 — стандартным интерактивным состоянием.
• Выбирайте одно серое семейство (slate, gray, zinc, neutral или stone) для каждого проекта и используйте его последовательно — смешивание серых семейств создаёт тонкую визуальную непоследовательность.
• Пользовательские семейства цветов добавляются через extend.colors в Tailwind v3 или @theme в v4. Генератор оттенков создаёт полную шкалу 50–950 из любого одного hex-значения бренда.
• В Tailwind v4 цвета — это CSS-переменные в @theme, что обеспечивает тематизацию чистым CSS без пересборки: переопределяйте семантические переменные цвета в блоке [data-theme="dark"].
• Семантические псевдонимы (primary: colors.blue) делают имена классов передающими назначение, а не внешний вид, переживая будущие изменения фирменного цвета без рефакторинга имён классов.
• Конвертер цветов предоставляет эквиваленты OKLCH для любого hex-значения — полезно для определений широкогаммного цвета в v4, использующих возможности P3-дисплеев.