Цвет slate в Tailwind CSS

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

Оттенки slate

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

slate-50

slate-100

slate-200

slate-300

slate-400

slate-500

slate-600

slate-700

slate-800

slate-900

slate-950

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

Tailwind v4 (CSS, @theme)

@theme {
  --color-slate-50: oklch(98.4% 0.003 247.858);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-300: oklch(86.9% 0.022 252.894);
  --color-slate-400: oklch(70.4% 0.04 256.788);
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-600: oklch(44.6% 0.043 257.281);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-slate-800: oklch(27.9% 0.041 260.031);
  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-slate-950: oklch(12.9% 0.042 264.695);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        slate: {
          50: '#f8fafc',
          100: '#f1f5f9',
          200: '#e2e8f0',
          300: '#cbd5e1',
          400: '#94a3b8',
          500: '#64748b',
          600: '#475569',
          700: '#334155',
          800: '#1e293b',
          900: '#0f172a',
          950: '#020617'
        }
      }
    }
  }
}

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

:root {
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #020617;
}

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

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

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

Палитра цветов из имениНапиши имя и получи собственную палитру цветов Цветной аквариумРасслабляющий 3D-аквариум в ваших цветах Узор из цветов дня рожденияКлетка и полоски из дней рождения всей семьи

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

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

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

В Tailwind v3 slate-500 — это #64748B, то есть rgb(100, 116, 139). В Tailwind v4 он задан как oklch(55.4% 0.046 257.417).

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

С помощью классов вроде bg-slate-500, text-slate-700 или border-slate-200. В Tailwind v4 в собственном CSS можно использовать и CSS-переменную var(--color-slate-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.