paletta
Tailwind CSS token

Tailwind Slate 600 in OKLCH

Quick answer: Tailwind Slate 600 is #475569, which converts to oklch(0.446 0.037 257.30). On white, it has a WCAG contrast ratio of 7.58:1 and an APCA score of Lc +86.33.

This meets the WCAG 2.2 AAA Normal text threshold (7:1) on white. The color shipped in Tailwind CSS v4.0 (January 2025) as part of the OKLCH default palette, which has 92% global browser support (caniuse, April 2026).

oklch(0.446 0.037 257.30)

Tailwind Slate 600 is a Tailwind utility color. This page frames #475569 as a utility stop: copy the generated @theme scale below, or map it into your own tokens.

Specs

oklch(0.446 0.037 257.30)
#475569

Highest contrast: white

7.58:1
Normal AA
Normal AAA
Large AA
Large AAA
Lc +86.33
Try in Studio

Accessibility lens

  • Base#475569
  • 300#8692A2
  • 500#475569
  • 700#283343

Toggle a lens to preview this color under color vision differences.

How does Tailwind Slate 600 go from primitive to component?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#475569
oklch
oklch(0.446 0.037 257.30)

Semantic

Bound to a role token that UI reads by name.

--primary: #475569

One primitive feeds the role. --primary then drives --ring and the hover and active states below, so a single value stays in sync everywhere.

Component

Applied to real UI across states.

AAA7.58:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (7.58:1 on #475569).

How does Tailwind Slate 600 scale from 50 to 950?

Tailwind Slate 600
50 to 950
#F2F5FA
#CDD3DB
#A9B2BF
#8692A2
#657386
#475569
#374456
#283343
#1B2430
#0F151E
#04070D
  • 50oklch(0.969 0.007 260.73)
  • 100oklch(0.865 0.013 255.51)
  • 200oklch(0.761 0.021 257.49)
  • 300oklch(0.656 0.028 255.61)
  • 400oklch(0.551 0.034 256.08)
  • 500oklch(0.446 0.037 257.28)
  • 600oklch(0.383 0.035 256.59)
  • 700oklch(0.318 0.032 257.68)
  • 800oklch(0.257 0.026 255.76)
  • 900oklch(0.194 0.021 258.33)
  • 950oklch(0.127 0.016 257.84)

How does Tailwind Slate 600 score on WCAG 2.2 contrast?

Every fg × bg combination, with WCAG 2.2 verdicts.

AAA (7:1+)
AA (4.5:1+)
Below AA (under 4.5:1)
Hover for APCA
Aa1.00Below AA
Aa1.96Below AA
Aa4.42Below AA
Aa9.05AAA
Aa14.32AAA
Aa18.45AAA
Aa1.96Below AA
Aa1.00Below AA
Aa2.25Below AA
Aa4.62AA
Aa7.31AAA
Aa9.42AAA
Aa4.42Below AA
Aa2.25Below AA
Aa1.00Below AA
Aa2.05Below AA
Aa3.24Below AA
Aa4.18Below AA
Aa9.05AAA
Aa4.62AA
Aa2.05Below AA
Aa1.00Below AA
Aa1.58Below AA
Aa2.04Below AA
Aa14.32AAA
Aa7.31AAA
Aa3.24Below AA
Aa1.58Below AA
Aa1.00Below AA
Aa1.29Below AA
Aa18.45AAA
Aa9.42AAA
Aa4.18Below AA
Aa2.04Below AA
Aa1.29Below AA
Aa1.00Below AA

Does Tailwind Slate 600 pass WCAG 2.2 on common neutral backgrounds?

  • Aa7.58AAA

    White #FFFFFF

  • Aa6.95AA

    Neutral 100 #F5F5F5

  • Aa6.02AA

    Neutral 200 #E5E5E5

  • Aa3.00Below AA

    Neutral 400 #A3A3A3

  • Aa1.03Below AA

    Neutral 600 #525252

  • Aa2.37Below AA

    Neutral 900 #171717

  • Aa2.77Below AA

    Black #000000

What palettes pair with Tailwind Slate 600?

Analogous

  • #476961
  • #476369
  • #475569
  • #474769
  • #554769

Complementary

  • #667A97
  • #475569

Triadic

  • #475569
  • #222932
  • #694755

Where should you use Tailwind Slate 600 in production UI?

bg: primary-50 · border: primary-100
Monthly revenue
$48,219
text: primary-900
+12.4% vs last mo.
badge: primary-100 / primary-700
primary-500
$8.2k
JANFEBMARAPRMAYJUNJUL
bg: primary-600 · fg: white
ONBOARDING · STEP 2
Export your first design system this week.
bg: surface · border: neutral-200
SYSTEM
All systems normal
APIprimary-50 / primary-700Webprimary-50 / primary-700Pluginprimary-50 / primary-700
Tokens
248
+18 this week
overlay: primary-700 → primary-800
"One color system, every screen in sync."
Maya Okafor
Design systems lead
EPISODE 14
Designing color systems that scale
28:14
bg: primary-900
--primary-500
#475569
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600button-secondary: primary-50
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

Notes on Tailwind Slate 600

Slate 600 is a mid-dark cool gray, oklch(0.446 0.037 257.3), the stop that does the heavy lifting for secondary text and UI chrome on light backgrounds. It reads strongly on white, WCAG 2.2 AAA (7.58:1, APCA Lc +86.33), so subheads, captions, and icon strokes in #475569 stay crisp at small sizes. As you would expect from a dark neutral, it is not a dark-mode text color; on near-black it sits Below AA (2.77:1), so invert to a lighter slate there. Its low chroma keeps the harmonies subtle: the complementary #667A97 is a lighter partner for borders, and the triad barely departs, to #222932 and #694755. Reach for slate whenever you need structure without another hue competing for attention. The accessibility lens leaves it essentially flat; the protanopia and deuteranopia simulations sit near #4C4B63 and tritanopia at #486060, so it stays a dependable neutral for every viewer.

What other Tailwind and shadcn colors relate to Tailwind Slate 600?

Browse all colors

@theme {
  --color-primary-50: #f2f5fa;
  --color-primary-100: #cdd3db;
  --color-primary-200: #a9b2bf;
  --color-primary-300: #8692a2;
  --color-primary-400: #657386;
  --color-primary-500: #475569;
  --color-primary-600: #374456;
  --color-primary-700: #283343;
  --color-primary-800: #1b2430;
  --color-primary-900: #0f151e;
  --color-primary-950: #04070d;

  --color-secondary-50: #f5f4fa;
  --color-secondary-100: #d1d0da;
  --color-secondary-200: #aeadbc;
  --color-secondary-300: #8c8b9f;
  --color-secondary-400: #6c6b82;
  --color-secondary-500: #4e4c64;
  --color-secondary-600: #3e3c52;
  --color-secondary-700: #2f2d40;
  --color-secondary-800: #211f2e;
  --color-secondary-900: #13121d;
  --color-secondary-950: #07060d;

  --color-accent-50: #f1f6f7;
  --color-accent-100: #ced7d7;
  --color-accent-200: #abb8b9;
  --color-accent-300: #899b9c;
  --color-accent-400: #6a7e80;
  --color-accent-500: #4c6264;
  --color-accent-600: #3a4e50;
  --color-accent-700: #2a3b3d;
  --color-accent-800: #1c292a;
  --color-accent-900: #0e1819;
  --color-accent-950: #040809;

  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #eff0f1;
  --color-neutral-200: #dfe0e2;
  --color-neutral-300: #c4c6ca;
  --color-neutral-400: #9ea2a9;
  --color-neutral-500: #787e87;
  --color-neutral-600: #5b6067;
  --color-neutral-700: #43474c;
  --color-neutral-800: #2b2d31;
  --color-neutral-900: #18191b;
  --color-neutral-950: #0e0f10;

  --color-success-50: #e6fce9;
  --color-success-100: #c4eaca;
  --color-success-200: #9ddaa7;
  --color-success-300: #74c985;
  --color-success-400: #4ab766;
  --color-success-500: #16a34a;
  --color-success-600: #008330;
  --color-success-700: #00631a;
  --color-success-800: #00440a;
  --color-success-900: #002700;
  --color-success-950: #000d00;

  --color-error-50: #ffebe6;
  --color-error-100: #ffc9c0;
  --color-error-200: #ffa398;
  --color-error-300: #fe7c6f;
  --color-error-400: #f0544a;
  --color-error-500: #dc2626;
  --color-error-600: #b8000a;
  --color-error-700: #910000;
  --color-error-800: #680000;
  --color-error-900: #420000;
  --color-error-950: #200000;

  --color-warning-50: #fff1e1;
  --color-warning-100: #fed9be;
  --color-warning-200: #f9c095;
  --color-warning-300: #f2a66a;
  --color-warning-400: #e78e40;
  --color-warning-500: #d97706;
  --color-warning-600: #b25800;
  --color-warning-700: #893d00;
  --color-warning-800: #612500;
  --color-warning-900: #3a0f00;
  --color-warning-950: #180000;

  --color-info-50: #e6f6ff;
  --color-info-100: #bfdaff;
  --color-info-200: #95bdff;
  --color-info-300: #6ca0ff;
  --color-info-400: #4782fd;
  --color-info-500: #2563eb;
  --color-info-600: #114ac8;
  --color-info-700: #0333a1;
  --color-info-800: #002076;
  --color-info-900: #000e4e;
  --color-info-950: #000129;

  /* Surfaces */
  --color-background: #F7F7F8;
  --color-surface: #FFFFFF;
  --color-elevated: #F7F7F8;
  --color-foreground: #18191B;
  --color-muted: #787E87;
  --color-border: #DFE0E2;
}

How do you export Tailwind Slate 600 as design tokens?

Export a W3C DTCG token document for the Tailwind Slate 600 50 to 950 scale, ready for Style Dictionary or any DTCG aware pipeline.

Frequently asked questions

Ready to build your color system?

Free forever, no credit card, Pro when you need more.

Built by a product designer who ships to code.

Generate system See pricing