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)

shadcn Slate Accessible is a shadcn theme token. This page frames #1E293B as a theme token: paste the :root and .dark blocks below to theme every component at once.

Specs

oklch(0.279 0.037 260.00)
#1E293B

Highest contrast: white

14.63:1
Normal AAmeets WCAG 2.2
Normal AAAmeets WCAG 2.2
Large AAmeets WCAG 2.2
Large AAAmeets WCAG 2.2
Lc +101.41
Try in Studio

Accessibility lens

  • Base#1E293B
  • 300#6A7484
  • 500#1E293B
  • 700#121B29

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

How does shadcn Slate Accessible go from primitive to component?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#1E293B
oklch
oklch(0.279 0.037 260.00)

Semantic

Bound to a role token that UI reads by name.

--primary: #1E293B

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.

AAA14.63:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (14.63:1 on #1E293B).

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

Does shadcn Slate Accessible pass WCAG 2.2 on common neutral backgrounds?

  • Aa14.63AAA

    White #FFFFFF

  • Aa13.42AAA

    Neutral 100 #F5F5F5

  • Aa11.61AAA

    Neutral 200 #E5E5E5

  • Aa5.80AA

    Neutral 400 #A3A3A3

  • Aa1.87Below AA

    Neutral 600 #525252

  • Aa1.23Below AA

    Neutral 900 #171717

  • Aa1.44Below AA

    Black #000000

What palettes pair with shadcn Slate Accessible?

Analogous

  • #1E3B35
  • #1E353B
  • #1E293B
  • #1F1E3B
  • #2B1E3B

Complementary

  • #384C6E
  • #1E293B

Triadic

  • #1E293B
  • #151C29
  • #3B1E29

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
"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
#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

Notes on shadcn Slate Accessible

Slate Accessible is the near-black slate, oklch(0.279 0.037 260), a hair warmer and bluer than plain zinc. It is built to be the high-contrast text and heading color in a shadcn theme, and the numbers back that up: on white it reads at WCAG 2.2 AAA (14.63:1, APCA Lc +101.41), so body copy, labels, and icons in #1E293B stay comfortable at any size. Treat the black side as off-limits; on a true black surface it drops Below AA (1.44:1), so it is a foreground for light backgrounds, not a fill for dark ones. When you do want depth on a card, the complementary #384C6E lifts a muted blue, and the analogous #1E353B leans teal for secondary chrome. The accessibility lens is a non-issue: the CVD simulations sit at #222136 and #1F3332, so close to the source that its role as reliable ink holds for every kind of color vision.

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

Browse all colors

: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: 217 33% 17%;
  --primary-foreground: 0 0% 100%;
  --secondary: 244 21% 84%;
  --secondary-foreground: 247 36% 10%;
  --muted: 240 7% 94%;
  --muted-foreground: 216 6% 50%;
  --accent: 188 17% 83%;
  --accent-foreground: 187 50% 7%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 5% 88%;
  --input: 220 5% 88%;
  --ring: 217 33% 17%;
  --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: 217 18% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 247 32% 15%;
  --secondary-foreground: 244 21% 84%;
  --muted: 220 7% 18%;
  --muted-foreground: 218 6% 64%;
  --accent: 187 37% 13%;
  --accent-foreground: 188 17% 83%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 7% 18%;
  --input: 220 7% 18%;
  --ring: 217 18% 32%;
  --radius: 0.5rem;
}

How do you export shadcn Slate Accessible as design tokens?

Export a W3C DTCG token document for the shadcn Slate Accessible 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