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

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

Protanopia#6B6B85
Deuteranopia#6A6984
Tritanopia#658180

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

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

What other Tailwind and shadcn colors look like Tailwind Slate 500?

@theme {
  --color-primary-50: #f0f2f4;
  --color-primary-100: #d6dbe1;
  --color-primary-200: #bbc3ce;
  --color-primary-300: #a1acba;
  --color-primary-400: #8795a7;
  --color-primary-500: #6d7d94;
  --color-primary-600: #5a677b;
  --color-primary-700: #465160;
  --color-primary-800: #333b47;
  --color-primary-900: #20252c;
  --color-primary-950: #15181d;

  --color-secondary-50: #f1f1f4;
  --color-secondary-100: #d8d8e0;
  --color-secondary-200: #bfbecb;
  --color-secondary-300: #a6a5b7;
  --color-secondary-400: #8e8ca3;
  --color-secondary-500: #75738f;
  --color-secondary-600: #605e76;
  --color-secondary-700: #4c4a5d;
  --color-secondary-800: #373644;
  --color-secondary-900: #23222b;
  --color-secondary-950: #16161c;

  --color-accent-50: #f1f3f4;
  --color-accent-100: #d8dfe0;
  --color-accent-200: #becbcb;
  --color-accent-300: #a5b6b7;
  --color-accent-400: #8ca2a3;
  --color-accent-500: #738d8f;
  --color-accent-600: #5e7476;
  --color-accent-700: #4a5c5d;
  --color-accent-800: #364344;
  --color-accent-900: #222a2b;
  --color-accent-950: #161b1c;

  --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: #e9fcf0;
  --color-success-100: #c1f7d4;
  --color-success-200: #99f1b9;
  --color-success-300: #71ec9e;
  --color-success-400: #49e683;
  --color-success-500: #21e168;
  --color-success-600: #19bb55;
  --color-success-700: #149343;
  --color-success-800: #0e6b31;
  --color-success-900: #09431f;
  --color-success-950: #062c14;

  --color-error-50: #fbe9e9;
  --color-error-100: #f5c2c2;
  --color-error-200: #ef9b9b;
  --color-error-300: #e97474;
  --color-error-400: #e24d4d;
  --color-error-500: #dc2626;
  --color-error-600: #b71e1e;
  --color-error-700: #901717;
  --color-error-800: #691111;
  --color-error-900: #420b0b;
  --color-error-950: #2b0707;

  --color-warning-50: #fef3e6;
  --color-warning-100: #fddeba;
  --color-warning-200: #fcc98e;
  --color-warning-300: #fbb462;
  --color-warning-400: #f99f36;
  --color-warning-500: #f8890a;
  --color-warning-600: #cf7106;
  --color-warning-700: #a35904;
  --color-warning-800: #774103;
  --color-warning-900: #4a2902;
  --color-warning-950: #301b01;

  --color-info-50: #e8eefd;
  --color-info-100: #bed1f9;
  --color-info-200: #95b3f5;
  --color-info-300: #6b95f1;
  --color-info-400: #4277ee;
  --color-info-500: #185aea;
  --color-info-600: #1249c3;
  --color-info-700: #0e3a99;
  --color-info-800: #0a2a70;
  --color-info-900: #061a46;
  --color-info-950: #04112e;

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

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