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.62:1 and an APCA score of Lc +101.41.
This meets the WCAG 2.2 AAA 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).
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)#1E293BHighest contrast: white
14.62:1Normal AAmeets WCAG 2.2Normal AAAmeets WCAG 2.2Large AAmeets WCAG 2.2Large AAAmeets WCAG 2.2Lc +101.41Accessibility 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?
- Primitive
- Semantic
- 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: #1E293BOne 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.
On-color text: white (14.62:1 on #1E293B).
How does shadcn Slate Accessible scale from 50 to 950?
- 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.
Does shadcn Slate Accessible pass WCAG 2.2 on common neutral backgrounds?
- Aa14.62AAA
White #FFFFFF
- Aa13.41AAA
Neutral 100 #F5F5F5
- Aa11.61AAA
Neutral 200 #E5E5E5
- Aa5.79AA
Neutral 400 #A3A3A3
- Aa1.87Below AA
Neutral 600 #525252
- Aa1.22Below AA
Neutral 900 #171717
- Aa1.43Below 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?
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.62: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.43: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?
Other shadcn themes
shadcn Primary Blue in OKLCH
oklch(0.623 0.188 259.80)
shadcn Zinc Dark in OKLCH
oklch(0.274 0.005 286.00)
shadcn Indigo Custom in OKLCH
oklch(0.585 0.204 277.10)
shadcn Orange in OKLCH
oklch(0.705 0.187 47.60)
shadcn Green in OKLCH
oklch(0.723 0.192 149.60)
shadcn Red in OKLCH
oklch(0.637 0.208 25.30)
shadcn Violet in OKLCH
oklch(0.606 0.219 292.70)
Nearest hues across families
shadcn :root block
: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.
FAQ
Frequently asked questions
shadcn Slate Accessible (#1E293B) is oklch(0.279 0.037 260) in the OKLCH color space.
shadcn Slate Accessible passes WCAG 2.2 AA on white for normal text. Contrast ratios: 14.62:1 on white, 1.43:1 on black.
On white, shadcn Slate Accessible has an APCA Lc of 101.4. On black, Lc is 0. APCA is a perceptual contrast model, not a WCAG compliance standard.
Paste the snippet above into your globals.css (with :root and .dark blocks).
Under deuteranopia (most common, around 5 percent of men), shadcn Slate Accessible simulates to #222136. Under protanopia it shifts to #232337. Under tritanopia it appears as #1f3332. 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.