shadcn token
shadcn Red in OKLCH
Quick answer: shadcn Red is #EF4444, which converts to oklch(0.637 0.208 25.30). On white, it has a WCAG contrast ratio of 3.76:1 and an APCA score of Lc +63.83.
This meets the WCAG 2.2 AA Large text threshold (3: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 Red is a shadcn theme token. This page frames #EF4444 as a theme token: paste the :root and .dark blocks below to theme every component at once.
Specs
oklch(0.637 0.208 25.30)#EF4444Highest contrast: black
5.58:1Normal AAmeets WCAG 2.2Normal AAAdoes not meet WCAG 2.2Large AAmeets WCAG 2.2Large AAAmeets WCAG 2.2Lc -37.85Accessibility lens
- Base#EF4444
- 300#FF8980
- 500#EF4444
- 700#9B0014
Toggle a lens to preview this color under color vision differences.
How does shadcn Red go from primitive to component?
- Primitive
- Semantic
- Component
Primitive
The raw value, before it means anything.
- hex
- #EF4444
- oklch
- oklch(0.637 0.208 25.30)
Semantic
Bound to a role token that UI reads by name.
--primary: #EF4444One 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: black (5.58:1 on #EF4444).
How does shadcn Red scale from 50 to 950?
- 50oklch(0.955 0.023 31.10)
- 100oklch(0.890 0.058 26.23)
- 200oklch(0.823 0.099 26.25)
- 300oklch(0.758 0.145 25.58)
- 400oklch(0.703 0.188 25.36)
- 500oklch(0.637 0.208 25.33)
- 600oklch(0.535 0.197 25.23)
- 700oklch(0.434 0.176 25.52)
- 800oklch(0.341 0.139 27.53)
- 900oklch(0.245 0.101 29.23)
- 950oklch(0.150 0.062 29.23)
How does shadcn Red score on WCAG 2.2 contrast?
Every fg × bg combination, with WCAG 2.2 verdicts.
Does shadcn Red pass WCAG 2.2 on common neutral backgrounds?
- Aa3.76Below AA
White #FFFFFF
- Aa3.45Below AA
Neutral 100 #F5F5F5
- Aa2.98Below AA
Neutral 200 #E5E5E5
- Aa1.49Below AA
Neutral 400 #A3A3A3
- Aa2.07Below AA
Neutral 600 #525252
- Aa4.76AA
Neutral 900 #171717
- Aa5.58AA
Black #000000
What palettes pair with shadcn Red?
Analogous
- #EF44D2
- #EF448B
- #EF4444
- #EF8B44
- #EFD344
Complementary
- #F58A8A
- #EF4444
Triadic
- #EF4444
- #C61111
- #44EF44
Where should you use shadcn Red in production UI?
Notes on shadcn Red
Red is the shadcn destructive base, oklch(0.637 0.208 25.3), the value behind delete buttons, error text, and danger banners. As white text on a red fill it reaches AA Large (3.76:1) under WCAG 2.2, right for a standard large button label but tight for small text, so keep destructive copy at size or darken a stop. The same red as text on a near-black card is stronger at AA (5.58:1, APCA Lc -37.85). Its triad is a warning in itself: it pairs #EF4444 with a green #44EF44, and under the accessibility lens that pairing is a trap, because protanopia and deuteranopia turn this red into olive (#AFBC44) while pushing greens the same way. A red-versus-green scheme for destructive and success can become one indistinct color for red-green viewers. Tritanopia keeps the red (#E64444). Always carry destructive meaning with an icon and a verb, and never rely on red against green alone.
What other Tailwind and shadcn colors relate to shadcn Red?
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 Slate Accessible in OKLCH
oklch(0.279 0.037 260.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 Violet in OKLCH
oklch(0.606 0.219 292.70)
Nearest hues across families
shadcn :root block
:root {
--background: 0 7% 97%;
--foreground: 0 6% 10%;
--card: 0 7% 97%;
--card-foreground: 0 6% 10%;
--popover: 0 7% 97%;
--popover-foreground: 0 6% 10%;
--primary: 0 84% 60%;
--primary-foreground: 0 0% 0%;
--secondary: 29 73% 88%;
--secondary-foreground: 31 100% 10%;
--muted: 0 7% 94%;
--muted-foreground: 0 6% 50%;
--accent: 335 100% 91%;
--accent-foreground: 325 90% 12%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 0 5% 88%;
--input: 0 5% 88%;
--ring: 0 84% 60%;
--radius: 0.5rem;
}
.dark {
--background: 0 7% 6%;
--foreground: 0 7% 97%;
--card: 0 6% 10%;
--card-foreground: 0 7% 97%;
--popover: 0 6% 10%;
--popover-foreground: 0 7% 97%;
--primary: 2 100% 69%;
--primary-foreground: 0 0% 0%;
--secondary: 32 73% 20%;
--secondary-foreground: 29 73% 88%;
--muted: 0 7% 18%;
--muted-foreground: 0 6% 64%;
--accent: 327 64% 23%;
--accent-foreground: 335 100% 91%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 0 7% 18%;
--input: 0 7% 18%;
--ring: 2 100% 69%;
--radius: 0.5rem;
}How do you export shadcn Red as design tokens?
Export a W3C DTCG token document for the shadcn Red 50 to 950 scale, ready for Style Dictionary or any DTCG aware pipeline.
FAQ
Frequently asked questions
shadcn Red (#EF4444) is oklch(0.637 0.208 25.3) in the OKLCH color space.
shadcn Red passes WCAG 2.2 AA on black for normal text. Contrast ratios: 3.76:1 on white, 5.58:1 on black.
On white, shadcn Red has an APCA Lc of 63.8. On black, Lc is -37.8. 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 Red simulates to #afbc44. Under protanopia it shifts to #a5a344. Under tritanopia it appears as #e64444. 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.