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)

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

Specs

oklch(0.705 0.187 47.60)
#F97316

Highest contrast: black

7.49:1
Normal AAmeets WCAG 2.2
Normal AAAmeets WCAG 2.2
Large AAmeets WCAG 2.2
Large AAAmeets WCAG 2.2
Lc -48.69
Try in Studio

Accessibility lens

  • Base#F97316
  • 300#FFA46E
  • 500#F97316
  • 700#9F3400

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

How does shadcn Orange go from primitive to component?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#F97316
oklch
oklch(0.705 0.187 47.60)

Semantic

Bound to a role token that UI reads by name.

--primary: #F97316

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.

AAA7.49:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (7.49:1 on #F97316).

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

Does shadcn Orange pass WCAG 2.2 on common neutral backgrounds?

  • Aa2.80Below AA

    White #FFFFFF

  • Aa2.57Below AA

    Neutral 100 #F5F5F5

  • Aa2.23Below AA

    Neutral 200 #E5E5E5

  • Aa1.11Below AA

    Neutral 400 #A3A3A3

  • Aa2.79Below AA

    Neutral 600 #525252

  • Aa6.40AA

    Neutral 900 #171717

  • Aa7.49AAA

    Black #000000

What palettes pair with shadcn Orange?

Analogous

  • #F91676
  • #F91618
  • #F97316
  • #F9D216
  • #C2F916

Complementary

  • #FBA061
  • #F97316

Triadic

  • #F97316
  • #AF4A04
  • #16F973

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

Notes on shadcn Orange

Orange as a shadcn base is a high-energy accent, oklch(0.705 0.187 47.6), the color for calls to action, warnings, and bright empty states. Like most warm mid-tones it cannot hold small text on white, sitting Below AA (2.8:1, APCA Lc +53.16), so #F97316 should be a fill or a large graphic rather than body copy on a light page. On a near-black surface it turns strong, WCAG 2.2 AAA (7.49:1, APCA Lc -48.69), so dark mode and dark panels are its home. For range, the analogous set climbs from red #F91618 to yellow #F9D216, a natural warm gradient, and the triad reaches a mint #16F973. Cool slate chrome keeps it from reading like a traffic cone. The accessibility lens is the real constraint: under protanopia and deuteranopia orange slides toward yellow-green (#C7D132), close to where greens land, so an orange-and-green pairing can merge. Separate warning from success with icons and words, not warmth alone.

What other Tailwind and shadcn colors relate to shadcn Orange?

Browse all colors

: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: 25 95% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 56 62% 86%;
  --secondary-foreground: 51 100% 9%;
  --muted: 30 7% 94%;
  --muted-foreground: 24 6% 50%;
  --accent: 3 100% 89%;
  --accent-foreground: 357 100% 13%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 20 5% 88%;
  --input: 20 5% 88%;
  --ring: 25 95% 53%;
  --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: 22 100% 64%;
  --primary-foreground: 0 0% 100%;
  --secondary: 53 100% 17%;
  --secondary-foreground: 56 62% 86%;
  --muted: 20 7% 18%;
  --muted-foreground: 22 6% 64%;
  --accent: 352 100% 20%;
  --accent-foreground: 3 100% 89%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 20 7% 18%;
  --input: 20 7% 18%;
  --ring: 22 100% 64%;
  --radius: 0.5rem;
}

How do you export shadcn Orange as design tokens?

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