Color stone de Tailwind CSS

Los 11 tonos del color stone de Tailwind CSS, del stone-50 (el más claro) al stone-950 (el más oscuro). Haz clic en cualquier valor para copiarlo.

Tonos de stone

HEX y RGB de Tailwind v3; OKLCH de Tailwind v4. Haz clic en un valor para copiarlo.

stone-50

stone-100

stone-200

stone-300

stone-400

stone-500

stone-600

stone-700

stone-800

stone-900

stone-950

Copiar toda la paleta

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'
        }
      }
    }
  }
}

Variables 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;
}

Otros colores de Tailwind

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

Preguntas frecuentes

¿Cuál es el código HEX de Tailwind stone-500?

En Tailwind v3, stone-500 es #78716C, es decir rgb(120, 113, 108). En Tailwind v4 se define como oklch(55.3% 0.013 58.071).

¿Cómo uso Tailwind stone en mi proyecto?

Con clases como bg-stone-500, text-stone-700 o border-stone-200. En Tailwind v4 también puedes usar la variable CSS var(--color-stone-500) en tu propio CSS.

Otros frameworks

Tailwind CSS, Material Design y Bootstrap son marcas de sus respectivos dueños. Los valores salen de su documentación y sus paquetes públicos: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.