Цвет indigo в Tailwind CSS

11 оттенков цвета indigo в Tailwind CSS, от indigo-50 (самый светлый) до indigo-950 (самый тёмный). Нажми на любое значение, чтобы скопировать его.

Оттенки indigo

HEX и RGB из Tailwind v3; OKLCH из Tailwind v4. Нажми на значение, чтобы скопировать его.

indigo-50

indigo-100

indigo-200

indigo-300

indigo-400

indigo-500

indigo-600

indigo-700

indigo-800

indigo-900

indigo-950

Скопировать всю палитру

Tailwind v4 (CSS, @theme)

@theme {
  --color-indigo-50: oklch(96.2% 0.018 272.314);
  --color-indigo-100: oklch(93% 0.034 272.788);
  --color-indigo-200: oklch(87% 0.065 274.039);
  --color-indigo-300: oklch(78.5% 0.115 274.713);
  --color-indigo-400: oklch(67.3% 0.182 276.935);
  --color-indigo-500: oklch(58.5% 0.233 277.117);
  --color-indigo-600: oklch(51.1% 0.262 276.966);
  --color-indigo-700: oklch(45.7% 0.24 277.023);
  --color-indigo-800: oklch(39.8% 0.195 277.366);
  --color-indigo-900: oklch(35.9% 0.144 278.697);
  --color-indigo-950: oklch(25.7% 0.09 281.288);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        indigo: {
          50: '#eef2ff',
          100: '#e0e7ff',
          200: '#c7d2fe',
          300: '#a5b4fc',
          400: '#818cf8',
          500: '#6366f1',
          600: '#4f46e5',
          700: '#4338ca',
          800: '#3730a3',
          900: '#312e81',
          950: '#1e1b4b'
        }
      }
    }
  }
}

CSS-переменные (HEX)

:root {
  --indigo-50: #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-900: #312E81;
  --indigo-950: #1E1B4B;
}

Другие цвета Tailwind

slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue violet purple fuchsia pink rose

Попробуй также

Палитра цветов из имениНапиши имя и получи собственную палитру цветов Колесо фортуныВпиши свои варианты и крути колесо. Можно и цветное Цветовой автоматПотяни рычаг и получи цветовую палитру

Все бесплатные инструменты →

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

Какой HEX-код у Tailwind indigo-500?

В Tailwind v3 indigo-500 — это #6366F1, то есть rgb(99, 102, 241). В Tailwind v4 он задан как oklch(58.5% 0.233 277.117).

Как использовать Tailwind indigo в своём проекте?

С помощью классов вроде bg-indigo-500, text-indigo-700 или border-indigo-200. В Tailwind v4 в собственном CSS можно использовать и CSS-переменную var(--color-indigo-500).

Другие фреймворки

Tailwind CSS, Material Design и Bootstrap — товарные знаки их владельцев. Значения взяты из их документации и публичных пакетов: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.