paletta
shadcn token

shadcn Slate Accessible in OKLCH

Quick answer: shadcn Slate Accessible is #1E293B, which converts to oklch(0.279 0.037 260.00). On white, it has a WCAG contrast ratio of 14.63:1 and an APCA score of Lc +101.41.

This meets the WCAG 2.2 AAA Normal text threshold (7:1) on white. The OKLCH base colors used here are available in shadcn/ui since the Tailwind v4 update (February 2025), with 92% global browser support for OKLCH notation (caniuse, April 2026).

oklch(0.279 0.037 260.00)

Specs

oklch(0.279 0.037 260.00)
#1E293B

Highest contrast: white

14.63:1
Normal AA
Normal AAA
Large AA
Large AAA
Lc +101.41
Try in Studio

Accessibility lens

Protanopia#232337
Deuteranopia#222136
Tritanopia#1F3332

How does shadcn Slate Accessible scale from 50 to 950?

shadcn Slate Accessible
50 to 950
#F2F5FA
#C3C8D1
#959DA9
#6A7484
#424D5F
#1E293B
#182232
#121B29
#0D141F
#080D16
#05070D
  • 50oklch(0.969 0.007 260.73)
  • 100oklch(0.832 0.014 262.37)
  • 200oklch(0.693 0.020 258.36)
  • 300oklch(0.556 0.028 259.80)
  • 400oklch(0.418 0.033 260.21)
  • 500oklch(0.279 0.037 260.03)
  • 600oklch(0.251 0.034 259.58)
  • 700oklch(0.221 0.031 259.02)
  • 800oklch(0.190 0.025 259.24)
  • 900oklch(0.159 0.021 261.35)
  • 950oklch(0.129 0.015 266.38)

How does shadcn Slate Accessible 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
Aa2.50Below AA
Aa7.82AAA
Aa14.63AAA
Aa16.90AAA
Aa18.43AAA
Aa2.50Below AA
Aa1.00Below AA
Aa3.12Below AA
Aa5.84AA
Aa6.75AA
Aa7.36AAA
Aa7.82AAA
Aa3.12Below AA
Aa1.00Below AA
Aa1.87Below AA
Aa2.16Below AA
Aa2.36Below AA
Aa14.63AAA
Aa5.84AA
Aa1.87Below AA
Aa1.00Below AA
Aa1.16Below AA
Aa1.26Below AA
Aa16.90AAA
Aa6.75AA
Aa2.16Below AA
Aa1.16Below AA
Aa1.00Below AA
Aa1.09Below AA
Aa18.43AAA
Aa7.36AAA
Aa2.36Below AA
Aa1.26Below AA
Aa1.09Below AA
Aa1.00Below AA

Where should you use shadcn Slate Accessible 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
"Paletta replaced our color brainstorm meetings."
Sora Mehta
Design lead, Northwind
EPISODE 14
Designing color systems that scale
28:14
bg: primary-900
--primary-500
#1E293B
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 shadcn Slate Accessible?

:root {
  --background: 240 7% 97%;
  --foreground: 220 6% 10%;
  --card: 240 7% 97%;
  --card-foreground: 220 6% 10%;
  --popover: 240 7% 97%;
  --popover-foreground: 220 6% 10%;
  --primary: 223 12% 49%;
  --primary-foreground: 0 0% 100%;
  --secondary: 247 24% 86%;
  --secondary-foreground: 250 24% 15%;
  --muted: 240 7% 94%;
  --muted-foreground: 216 6% 50%;
  --accent: 187 24% 86%;
  --accent-foreground: 187 24% 15%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 5% 88%;
  --input: 220 5% 88%;
  --ring: 223 12% 49%;
  --radius: 0.5rem;
}

.dark {
  --background: 210 7% 6%;
  --foreground: 240 7% 97%;
  --card: 220 6% 10%;
  --card-foreground: 240 7% 97%;
  --popover: 220 6% 10%;
  --popover-foreground: 240 7% 97%;
  --primary: 222 12% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 246 23% 24%;
  --secondary-foreground: 247 24% 86%;
  --muted: 220 7% 18%;
  --muted-foreground: 218 6% 64%;
  --accent: 186 23% 24%;
  --accent-foreground: 187 24% 86%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 7% 18%;
  --input: 220 7% 18%;
  --ring: 222 12% 58%;
  --radius: 0.5rem;
}

Frequently asked questions

Ready to build your color system?

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

Get started for free See pricing