paletta

Tailwind CSS token

Tailwind Slate 500 in OKLCH

Quick answer: Tailwind Slate 500 is #64748B, which converts to oklch(0.554 0.041 257.40). On white, it has a WCAG contrast ratio of 4.75:1 and an APCA score of Lc +73.04.

This meets the WCAG 2.2 AA text threshold (4.5: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.554 0.041 257.40)

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

  • Specs

    oklch(0.554 0.041 257.40)
    #64748B

    Highest contrast: white

    4.75:1
    Normal AAmeets WCAG 2.2
    Normal AAAdoes not meet WCAG 2.2
    Large AAmeets WCAG 2.2
    Large AAAmeets WCAG 2.2
    Lc +73.04
    Try in Studio

  • Accessibility lens

    • Base#64748B
    • 300#99A6B8
    • 500#64748B
    • 700#384456

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

How does Tailwind Slate 500 go from primitive to component?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#64748B
oklch
oklch(0.554 0.041 257.40)

Semantic

Bound to a role token that UI reads by name.

--primary: #64748B

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.

AA4.75:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (4.75:1 on #64748B).

How does Tailwind Slate 500 scale from 50 to 950?

Tailwind Slate 500
50 to 950
#F2F5FB
#D4DAE3
#B6C0CE
#99A6B8
#7E8DA2
#64748B
#4D5C71
#384456
#252E3C
#131A24
#04070E
  • 50oklch(0.970 0.009 264.52)
  • 100oklch(0.886 0.014 258.35)
  • 200oklch(0.804 0.023 256.75)
  • 300oklch(0.721 0.030 256.51)
  • 400oklch(0.639 0.036 256.80)
  • 500oklch(0.554 0.041 257.42)
  • 600oklch(0.470 0.039 256.83)
  • 700oklch(0.384 0.035 258.35)
  • 800oklch(0.299 0.028 259.11)
  • 900oklch(0.216 0.022 257.29)
  • 950oklch(0.128 0.018 260.70)

How does Tailwind Slate 500 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.68Below AA
Aa3.09Below AA
Aa6.23AA
Aa12.52AAA
Aa18.45AAA
Aa1.68Below AA
Aa1.00Below AA
Aa1.83Below AA
Aa3.70Below AA
Aa7.44AAA
Aa10.96AAA
Aa3.09Below AA
Aa1.83Below AA
Aa1.00Below AA
Aa2.01Below AA
Aa4.05Below AA
Aa5.96AA
Aa6.23AA
Aa3.70Below AA
Aa2.01Below AA
Aa1.00Below AA
Aa2.01Below AA
Aa2.96Below AA
Aa12.52AAA
Aa7.44AAA
Aa4.05Below AA
Aa2.01Below AA
Aa1.00Below AA
Aa1.47Below AA
Aa18.45AAA
Aa10.96AAA
Aa5.96AA
Aa2.96Below AA
Aa1.47Below AA
Aa1.00Below AA

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

  • Aa4.75AA

    White #FFFFFF

  • Aa4.36Below AA

    Neutral 100 #F5F5F5

  • Aa3.77Below AA

    Neutral 200 #E5E5E5

  • Aa1.88Below AA

    Neutral 400 #A3A3A3

  • Aa1.64Below AA

    Neutral 600 #525252

  • Aa3.76Below AA

    Neutral 900 #171717

  • Aa4.41Below AA

    Black #000000

What palettes pair with Tailwind Slate 500?

  • Analogous

    • #648B82
    • #64848B
    • #64748B
    • #64648B
    • #74648B

  • Complementary

    • #8E9BAE
    • #64748B

  • Triadic

    • #64748B
    • #3E4756
    • #8B6474

Where should you use Tailwind Slate 500 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 / white
$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 · fg: white
"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
#64748B
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600 / whitebutton-secondary: primary-50 / primary-700
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

Notes on Tailwind Slate 500

Slate 500 sits almost on the gray axis, oklch(0.554 0.041 257.4), so it behaves like a cool neutral with just a hint of blue. That makes it the natural choice for secondary text, muted icons, borders, and placeholder copy rather than anything meant to shout. On white it clears WCAG 2.2 AA for normal text (4.75:1, APCA Lc +73.04); against a near-black background it eases back to AA Large (4.41:1), fine for secondary labels but not long paragraphs. Because its chroma is so low, the harmony hexes stay close to home: the complementary #8E9BAE and the analogous #64848B are barely a step away, which is exactly why slate reads as calm. Pair it with one saturated accent, a blue or an amber, so the interface has a single clear focal color. The accessibility lens is kind here; protanopia and deuteranopia leave it near #6A6984, and tritanopia at #658180 is almost identical, so it never collapses into a confusing partner.

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

Tailwind v4 @theme block

@theme {
  --color-primary-50: #f2f5fb;
  --color-primary-100: #d4dae3;
  --color-primary-200: #b6c0ce;
  --color-primary-300: #99a6b8;
  --color-primary-400: #7e8da2;
  --color-primary-500: #64748b;
  --color-primary-600: #4d5c71;
  --color-primary-700: #384456;
  --color-primary-800: #252e3c;
  --color-primary-900: #131a24;
  --color-primary-950: #04070e;

  --color-secondary-50: #f5f4fb;
  --color-secondary-100: #d8d7e2;
  --color-secondary-200: #bbbbcb;
  --color-secondary-300: #a09fb4;
  --color-secondary-400: #85849d;
  --color-secondary-500: #6c6a85;
  --color-secondary-600: #55536c;
  --color-secondary-700: #403e53;
  --color-secondary-800: #2b2a3a;
  --color-secondary-900: #181723;
  --color-secondary-950: #07060d;

  --color-accent-50: #f1f6f7;
  --color-accent-100: #d5dedf;
  --color-accent-200: #b8c7c8;
  --color-accent-300: #9db0b1;
  --color-accent-400: #82999b;
  --color-accent-500: #6a8385;
  --color-accent-600: #51686a;
  --color-accent-700: #3a4e4f;
  --color-accent-800: #253536;
  --color-accent-900: #121d1e;
  --color-accent-950: #030909;

  --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 500 as design tokens?

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

FAQ

Frequently asked questions

Tailwind Slate 500 (#64748B) is oklch(0.554 0.041 257.4) in the OKLCH color space.

Tailwind Slate 500 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 4.75:1 on white, 4.41:1 on black.

On white, Tailwind Slate 500 has an APCA Lc of 73. On black, Lc is -28.7. APCA is a perceptual contrast model, not a WCAG compliance standard.

Paste the snippet above into your tailwind.config (or globals.css with @theme).

Under deuteranopia (most common, around 5 percent of men), Tailwind Slate 500 simulates to #6a6984. Under protanopia it shifts to #6b6b85. Under tritanopia it appears as #658180. Always pair color with shape, label, or icon for accessibility.

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