Tailwind Stone: 11 Shades, Contrast & Codes

Tailwind CSS 4.3.3

stone: current colors

11 shades with exact official OKLCH values. Use bg-stone-500, text-stone-500 or border-stone-500 in Tailwind. Wide-gamut colors are preserved; these are not the v3 hex values.

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

Source: Tailwind CSS 4.3.3 theme.css (MIT). Values are pinned to this release. Older v3 reference values below are kept separately for existing projects.

Scale

Every shade, 50 to 950

Each shade has a page of its own. Under each, white and black text on it; a bold figure passes 4.5:1.

50#FAFAF9
White
1.04
Black
20.10
100#F5F5F4
White
1.09
Black
19.24
200#E7E5E4
White
1.25
Black
16.72
300#D6D3D1
White
1.48
Black
14.09
400#A8A29E
White
2.52
Black
8.32
500#78716C
White
4.79
Black
4.37
600#57534E
White
7.62
Black
2.75
700#44403C
White
10.27
Black
2.04
800#292524
White
15.16
Black
1.38
900#1C1917
White
17.48
Black
1.20
950#0C0A09
White
19.75
Black
1.06

Values

Hex, RGB and OKLCH values

The Tailwind CSS v3.4 values, with the contrast of white and black text on each shade.

Shade	HEX	RGB	OKLCH	White text	Black text
stone-50	`#FAFAF9`	`rgb(250, 250, 249)`	`oklch(0.985 0.001 106.4)`	1.04	20.10
stone-100	`#F5F5F4`	`rgb(245, 245, 244)`	`oklch(0.970 0.001 106.4)`	1.09	19.24
stone-200	`#E7E5E4`	`rgb(231, 229, 228)`	`oklch(0.923 0.003 48.7)`	1.25	16.72
stone-300	`#D6D3D1`	`rgb(214, 211, 209)`	`oklch(0.869 0.004 56.4)`	1.48	14.09
stone-400	`#A8A29E`	`rgb(168, 162, 158)`	`oklch(0.716 0.009 56.3)`	2.52	8.32
stone-500	`#78716C`	`rgb(120, 113, 108)`	`oklch(0.553 0.012 58.1)`	4.79	4.37
stone-600	`#57534E`	`rgb(87, 83, 78)`	`oklch(0.444 0.010 73.6)`	7.62	2.75
stone-700	`#44403C`	`rgb(68, 64, 60)`	`oklch(0.374 0.009 67.6)`	10.27	2.04
stone-800	`#292524`	`rgb(41, 37, 36)`	`oklch(0.268 0.006 34.3)`	15.16	1.38
stone-900	`#1C1917`	`rgb(28, 25, 23)`	`oklch(0.216 0.006 56.0)`	17.48	1.20
stone-950	`#0C0A09`	`rgb(12, 10, 9)`	`oklch(0.147 0.004 49.2)`	19.75	1.06

Legibility

Which shades pass on each other

Every shade as text on every other shade. 48 of 110 pairings pass 4.5:1 for body text, and 16 more pass 3:1 for large text.

Text shade, then background shade	50	100	200	300	400	500	600	700	800	900	950
50	same shade	1.04	1.20	1.42	2.41	4.59	7.30	9.83	14.52	16.74	18.91
100	1.04	same shade	1.15	1.36	2.31	4.39	6.99	9.41	13.90	16.03	18.10
200	1.20	1.15	same shade	1.18	2.00	3.82	6.07	8.18	12.08	13.92	15.73
300	1.42	1.36	1.18	same shade	1.69	3.22	5.12	6.89	10.18	11.74	13.26
400	2.41	2.31	2.00	1.69	same shade	1.90	3.02	4.07	6.01	6.93	7.83
500	4.59	4.39	3.82	3.22	1.90	same shade	1.59	2.14	3.16	3.64	4.11
600	7.30	6.99	6.07	5.12	3.02	1.59	same shade	1.34	1.98	2.29	2.58
700	9.83	9.41	8.18	6.89	4.07	2.14	1.34	same shade	1.47	1.70	1.92
800	14.52	13.90	12.08	10.18	6.01	3.16	1.98	1.47	same shade	1.15	1.30
900	16.74	16.03	13.92	11.74	6.93	3.64	2.29	1.70	1.15	same shade	1.12
950	18.91	18.10	15.73	13.26	7.83	4.11	2.58	1.92	1.30	1.12	same shade

Rows are the text shade, columns the background. A bold figure on a tinted cell passes 4.5:1 for body text; a plain one passes 3:1 for large text only; a faint one fails.

Color vision

The scale with color blindness

The same eleven shades as seen with each color vision deficiency. Lightness keeps a ramp in order even where its hue collapses.

Simulated with Machado et al. (2009) at full severity, in linear light.

What each type sees

Typical vision

Closest neighbors: 50 and 100, ΔE2000 1.0
Protanopia

Closest neighbors: 50 and 100, ΔE2000 1.0
Deuteranopia

Closest neighbors: 50 and 100, ΔE2000 1.0
Tritanopia

Closest neighbors: 50 and 100, ΔE2000 1.0
Achromatopsia

Closest neighbors: 50 and 100, ΔE2000 1.0

Code

Design tokens

The whole family in six formats, ready to paste.

CSS custom properties

:root {
  --color-stone-50: #fafaf9;
  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;
  --color-stone-950: #0c0a09;
}

Tailwind config

// tailwind.config.js — stone is built in; this pins the v3.4 values.
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',
        },
      },
    },
  },
};

Tailwind v4 theme

/* app.css — Tailwind CSS v4 */
@import "tailwindcss";

@theme {
  /* v4 has its own stone; these pin the v3 values. */
  --color-stone-50: oklch(0.985 0.001 106.4);
  --color-stone-100: oklch(0.970 0.001 106.4);
  --color-stone-200: oklch(0.923 0.003 48.7);
  --color-stone-300: oklch(0.869 0.004 56.4);
  --color-stone-400: oklch(0.716 0.009 56.3);
  --color-stone-500: oklch(0.553 0.012 58.1);
  --color-stone-600: oklch(0.444 0.010 73.6);
  --color-stone-700: oklch(0.374 0.009 67.6);
  --color-stone-800: oklch(0.268 0.006 34.3);
  --color-stone-900: oklch(0.216 0.006 56.0);
  --color-stone-950: oklch(0.147 0.004 49.2);
}

Design tokens (W3C DTCG)

{
  "color": {
    "stone": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9804, 0.9804, 0.9765],
          "hex": "#fafaf9"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9608, 0.9608, 0.9569],
          "hex": "#f5f5f4"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9059, 0.898, 0.8941],
          "hex": "#e7e5e4"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8392, 0.8275, 0.8196],
          "hex": "#d6d3d1"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6588, 0.6353, 0.6196],
          "hex": "#a8a29e"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.4706, 0.4431, 0.4235],
          "hex": "#78716c"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.3412, 0.3255, 0.3059],
          "hex": "#57534e"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2667, 0.251, 0.2353],
          "hex": "#44403c"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1608, 0.1451, 0.1412],
          "hex": "#292524"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1098, 0.098, 0.0902],
          "hex": "#1c1917"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0471, 0.0392, 0.0353],
          "hex": "#0c0a09"
        }
      }
    }
  }
}

SwiftUI colors

import SwiftUI

enum Palette {
    static let stone50 = Color(.sRGB, red: 0.980, green: 0.980, blue: 0.976, opacity: 1)
    static let stone100 = Color(.sRGB, red: 0.961, green: 0.961, blue: 0.957, opacity: 1)
    static let stone200 = Color(.sRGB, red: 0.906, green: 0.898, blue: 0.894, opacity: 1)
    static let stone300 = Color(.sRGB, red: 0.839, green: 0.827, blue: 0.820, opacity: 1)
    static let stone400 = Color(.sRGB, red: 0.659, green: 0.635, blue: 0.620, opacity: 1)
    static let stone500 = Color(.sRGB, red: 0.471, green: 0.443, blue: 0.424, opacity: 1)
    static let stone600 = Color(.sRGB, red: 0.341, green: 0.325, blue: 0.306, opacity: 1)
    static let stone700 = Color(.sRGB, red: 0.267, green: 0.251, blue: 0.235, opacity: 1)
    static let stone800 = Color(.sRGB, red: 0.161, green: 0.145, blue: 0.141, opacity: 1)
    static let stone900 = Color(.sRGB, red: 0.110, green: 0.098, blue: 0.090, opacity: 1)
    static let stone950 = Color(.sRGB, red: 0.047, green: 0.039, blue: 0.035, opacity: 1)
}

Jetpack Compose colors

import androidx.compose.ui.graphics.Color

object Palette {
    val Stone50 = Color(0xFFFAFAF9)
    val Stone100 = Color(0xFFF5F5F4)
    val Stone200 = Color(0xFFE7E5E4)
    val Stone300 = Color(0xFFD6D3D1)
    val Stone400 = Color(0xFFA8A29E)
    val Stone500 = Color(0xFF78716C)
    val Stone600 = Color(0xFF57534E)
    val Stone700 = Color(0xFF44403C)
    val Stone800 = Color(0xFF292524)
    val Stone900 = Color(0xFF1C1917)
    val Stone950 = Color(0xFF0C0A09)
}

Families

Other Tailwind families

The rest of the Tailwind CSS v3.4 palette, in the order Tailwind lists it.

Tailwind stone 11 shades, 50 to 950