Barva stone v Tailwind CSS

11 odstínů barvy stone v Tailwind CSS, od stone-50 (nejsvětlejší) po stone-950 (nejtmavší). Klikni na libovolnou hodnotu a zkopíruješ ji.

Odstíny stone

HEX a RGB z Tailwindu v3; OKLCH z Tailwindu v4. Kliknutím na hodnotu ji zkopíruješ.

stone-50

stone-100

stone-200

stone-300

stone-400

stone-500

stone-600

stone-700

stone-800

stone-900

stone-950

Zkopírovat celou paletu

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

Proměnné 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;
}

Další barvy Tailwindu

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

Časté otázky

Jaký je HEX kód Tailwind stone-500?

V Tailwindu v3 je stone-500 #78716C, tedy rgb(120, 113, 108). V Tailwindu v4 je definovaná jako oklch(55.3% 0.013 58.071).

Jak použít Tailwind stone ve svém projektu?

Pomocí tříd jako bg-stone-500, text-stone-700 nebo border-stone-200. V Tailwindu v4 můžeš ve vlastním CSS použít i proměnnou CSS var(--color-stone-500).

Další frameworky

Tailwind CSS, Material Design a Bootstrap jsou ochranné známky svých vlastníků. Hodnoty pocházejí z jejich dokumentace a veřejných balíčků: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.