paletta
shadcn token

shadcn Orange in OKLCH

Quick answer: shadcn Orange is #F97316, which converts to oklch(0.705 0.187 47.60). On white, it has a WCAG contrast ratio of 2.80:1 and an APCA score of Lc +53.16.

This falls below the WCAG 2.2 AA Large text threshold (3:1) on white; pair with a darker foreground. 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.705 0.187 47.60)

Specs

oklch(0.705 0.187 47.60)
#F97316

Highest contrast: black

7.49:1
Normal AA
Normal AAA
Large AA
Large AAA
Lc -48.69
Try in Studio

Accessibility lens

Protanopia#BFBE2D
Deuteranopia#C7D132
Tritanopia#F23E42

How does shadcn Orange scale from 50 to 950?

shadcn Orange
50 to 950
#FFEEE0
#FFD7BF
#FFBE97
#FFA46E
#FF8A46
#F97316
#CD5100
#9F3400
#6F1C00
#440500
#1C0000
  • 50oklch(0.959 0.026 62.01)
  • 100oklch(0.907 0.055 52.75)
  • 200oklch(0.852 0.091 52.08)
  • 300oklch(0.799 0.129 50.74)
  • 400oklch(0.751 0.163 48.39)
  • 500oklch(0.705 0.187 47.60)
  • 600oklch(0.591 0.173 43.71)
  • 700oklch(0.478 0.151 39.71)
  • 800oklch(0.361 0.121 36.86)
  • 900oklch(0.248 0.094 31.90)
  • 950oklch(0.142 0.058 29.23)

How does shadcn Orange 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.42Below AA
Aa2.07Below AA
Aa3.89Below AA
Aa10.07AAA
Aa17.68AAA
Aa1.42Below AA
Aa1.00Below AA
Aa1.46Below AA
Aa2.74Below AA
Aa7.09AAA
Aa12.45AAA
Aa2.07Below AA
Aa1.46Below AA
Aa1.00Below AA
Aa1.88Below AA
Aa4.87AA
Aa8.55AAA
Aa3.89Below AA
Aa2.74Below AA
Aa1.88Below AA
Aa1.00Below AA
Aa2.59Below AA
Aa4.55AA
Aa10.07AAA
Aa7.09AAA
Aa4.87AA
Aa2.59Below AA
Aa1.00Below AA
Aa1.76Below AA
Aa17.68AAA
Aa12.45AAA
Aa8.55AAA
Aa4.55AA
Aa1.76Below AA
Aa1.00Below AA

Where should you use shadcn Orange 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
#F97316
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 Orange?

:root {
  --background: 0 7% 97%;
  --foreground: 20 6% 10%;
  --card: 0 7% 97%;
  --card-foreground: 20 6% 10%;
  --popover: 0 7% 97%;
  --popover-foreground: 20 6% 10%;
  --primary: 23 93% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 55 66% 86%;
  --secondary-foreground: 54 66% 15%;
  --muted: 30 7% 94%;
  --muted-foreground: 24 6% 50%;
  --accent: 355 66% 86%;
  --accent-foreground: 355 66% 15%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 20 5% 88%;
  --input: 20 5% 88%;
  --ring: 23 93% 52%;
  --radius: 0.5rem;
}

.dark {
  --background: 30 7% 6%;
  --foreground: 0 7% 97%;
  --card: 20 6% 10%;
  --card-foreground: 0 7% 97%;
  --popover: 20 6% 10%;
  --popover-foreground: 0 7% 97%;
  --primary: 24 92% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 55 67% 24%;
  --secondary-foreground: 55 66% 86%;
  --muted: 20 7% 18%;
  --muted-foreground: 22 6% 64%;
  --accent: 354 67% 24%;
  --accent-foreground: 355 66% 86%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 20 7% 18%;
  --input: 20 7% 18%;
  --ring: 24 92% 60%;
  --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