What is Tailwind Slate 500 in OKLCH?

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

Is Tailwind Slate 500 WCAG 2.2 AA accessible?

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

What is the APCA Lc for Tailwind Slate 500?

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.

How do I use Tailwind Slate 500 in Tailwind?

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

How does Tailwind Slate 500 look to people with color vision differences?

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.

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.76:1 and an APCA score of Lc +73.04.

This meets the WCAG 2.2 AA Normal 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.76:1

Normal AA

Normal AAA

Large AA

Large AAA

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?

Primitive
Semantic
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.76:1

DefaultSave paletteNew

HoverSave paletteNew

ActiveSave paletteNew

DisabledSave paletteNew

On-color text: white (4.76: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.53AAA

Aa18.46AAA

Aa1.68Below AA

Aa1.00Below AA

Aa1.84Below AA

Aa3.70Below AA

Aa7.44AAA

Aa10.96AAA

Aa3.09Below AA

Aa1.84Below AA

Aa1.00Below AA

Aa2.02Below AA

Aa4.05Below AA

Aa5.97AA

Aa6.23AA

Aa3.70Below AA

Aa2.02Below AA

Aa1.00Below AA

Aa2.01Below AA

Aa2.96Below AA

Aa12.53AAA

Aa7.44AAA

Aa4.05Below AA

Aa2.01Below AA

Aa1.00Below AA

Aa1.47Below AA

Aa18.46AAA

Aa10.96AAA

Aa5.97AA

Aa2.96Below AA

Aa1.47Below AA

Aa1.00Below AA

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

Aa4.76AA
White #FFFFFF
Aa4.36Below AA
Neutral 100 #F5F5F5
Aa3.78Below AA
Neutral 200 #E5E5E5
Aa1.89Below AA
Neutral 400 #A3A3A3
Aa1.64Below AA
Neutral 600 #525252
Aa3.77Below 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

$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

#64748B

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 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.76: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?

More Slate in Tailwind

Nearest hues across families

Browse all colors

@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.

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

Tailwind Slate 500 in OKLCH

Accessibility lens

How does Tailwind Slate 500 go from primitive to component?

How does Tailwind Slate 500 scale from 50 to 950?

How does Tailwind Slate 500 score on WCAG 2.2 contrast?

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

What palettes pair with Tailwind Slate 500?

Analogous

Complementary

Triadic

Where should you use Tailwind Slate 500 in production UI?

Notes on Tailwind Slate 500

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

More Slate in Tailwind

Tailwind Slate 600 in OKLCH

Tailwind Slate 700 in OKLCH

Nearest hues across families

shadcn Primary Blue in OKLCH

Tailwind Blue 500 in OKLCH

shadcn Slate Accessible in OKLCH

Tailwind Blue 600 in OKLCH

How do you export Tailwind Slate 500 as design tokens?

Frequently asked questions

Ready to build your color system?