Farbpaletten

Tailwind-CSS-Farbe stone

Die 11 Abstufungen der Tailwind-CSS-Farbe stone, von stone-50 (am hellsten) bis stone-950 (am dunkelsten). Klicke auf einen Wert, um ihn zu kopieren.

Abstufungen von stone

HEX und RGB aus Tailwind v3, OKLCH aus Tailwind v4. Klicke auf einen Wert, um ihn zu kopieren.

stone-50
stone-100
stone-200
stone-300
stone-400
stone-500
stone-600
stone-700
stone-800
stone-900
stone-950

Ganze Palette kopieren

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-Variablen (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;
}

Weitere Tailwind-Farben

slategrayzincneutralredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

Häufige Fragen

Wie lautet der HEX-Code von Tailwind stone-500?

In Tailwind v3 ist stone-500 #78716C, also rgb(120, 113, 108). In Tailwind v4 ist es als oklch(55.3% 0.013 58.071) definiert.

Wie verwende ich Tailwind stone in meinem Projekt?

Mit Klassen wie bg-stone-500, text-stone-700 oder border-stone-200. In Tailwind v4 kannst du in deinem eigenen CSS auch die CSS-Variable var(--color-stone-500) verwenden.

Weitere Frameworks

Tailwind-CSS-FarbpaletteMaterial-Design-FarbpaletteBootstrap-FarbpaletteFarbpaletten von Frameworks

Tailwind CSS, Material Design und Bootstrap sind Marken ihrer jeweiligen Inhaber. Die Werte stammen aus ihrer Dokumentation und ihren öffentlichen Paketen: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.