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

oklch(0.637 0.208 25.30)

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)
#EF4444

Highest contrast: black

5.58:1
Normal AA
Normal AAA
Large AA
Large AAA
Lc -37.85
Try in Studio

Accessibility 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?

  1. Primitive
  2. Semantic
  3. 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: #EF4444

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.

AA5.58:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (5.58:1 on #EF4444).

How does shadcn Red scale from 50 to 950?

shadcn Red
50 to 950
#FFEBE7
#FFCDC7
#FFACA3
#FF8980
#FF6660
#EF4444
#C6222A
#9B0014
#6F0005
#450000
#1F0000
  • 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.

AAA (7:1+)
AA (4.5:1+)
Below AA (under 4.5:1)
Hover for APCA
Aa1.00Below AA
Aa1.57Below AA
Aa2.50Below AA
Aa4.99AA
Aa10.90AAA
Aa17.28AAA
Aa1.57Below AA
Aa1.00Below AA
Aa1.60Below AA
Aa3.19Below AA
Aa6.96AA
Aa11.04AAA
Aa2.50Below AA
Aa1.60Below AA
Aa1.00Below AA
Aa2.00Below AA
Aa4.36Below AA
Aa6.92AA
Aa4.99AA
Aa3.19Below AA
Aa2.00Below AA
Aa1.00Below AA
Aa2.18Below AA
Aa3.46Below AA
Aa10.90AAA
Aa6.96AA
Aa4.36Below AA
Aa2.18Below AA
Aa1.00Below AA
Aa1.59Below AA
Aa17.28AAA
Aa11.04AAA
Aa6.92AA
Aa3.46Below AA
Aa1.59Below AA
Aa1.00Below AA

Does shadcn Red pass WCAG 2.2 on common neutral backgrounds?

  • Aa3.76Below AA

    White #FFFFFF

  • Aa3.45Below AA

    Neutral 100 #F5F5F5

  • Aa2.99Below AA

    Neutral 200 #E5E5E5

  • Aa1.49Below AA

    Neutral 400 #A3A3A3

  • Aa2.08Below 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?

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
#EF4444
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 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?

Browse all colors

: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% 100%;
  --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% 100%;
  --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.

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