Цвет stone в Tailwind CSS

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

Оттенки stone

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

stone-50

stone-100

stone-200

stone-300

stone-400

stone-500

stone-600

stone-700

stone-800

stone-900

stone-950

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

Tailwind v4 (CSS, @theme)

@theme {
  --color-stone-50: oklch(98.5% 0.001 106.423);
  --color-stone-100: oklch(97% 0.001 106.424);
  --color-stone-200: oklch(92.3% 0.003 48.717);
  --color-stone-300: oklch(86.9% 0.005 56.366);
  --color-stone-400: oklch(70.9% 0.01 56.259);
  --color-stone-500: oklch(55.3% 0.013 58.071);
  --color-stone-600: oklch(44.4% 0.011 73.639);
  --color-stone-700: oklch(37.4% 0.01 67.558);
  --color-stone-800: oklch(26.8% 0.007 34.298);
  --color-stone-900: oklch(21.6% 0.006 56.043);
  --color-stone-950: oklch(14.7% 0.004 49.25);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        stone: {
          50: '#fafaf9',
          100: '#f5f5f4',
          200: '#e7e5e4',
          300: '#d6d3d1',
          400: '#a8a29e',
          500: '#78716c',
          600: '#57534e',
          700: '#44403c',
          800: '#292524',
          900: '#1c1917',
          950: '#0c0a09'
        }
      }
    }
  }
}

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

:root {
  --stone-50: #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;
  --stone-950: #0C0A09;
}

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

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

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

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

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

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

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

В Tailwind v3 stone-500 — это #78716C, то есть rgb(120, 113, 108). В Tailwind v4 он задан как oklch(55.3% 0.013 58.071).

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

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