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).
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)#F97316Highest contrast: black
7.49:1Normal AAmeets WCAG 2.2Normal AAAmeets WCAG 2.2Large AAmeets WCAG 2.2Large AAAmeets WCAG 2.2Lc -48.69Accessibility 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?
- Primitive
- Semantic
- 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: #F97316One 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 (7.49:1 on #F97316).
How does shadcn Orange scale from 50 to 950?
- 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.
Does shadcn Orange pass WCAG 2.2 on common neutral backgrounds?
- Aa2.80Below AA
White #FFFFFF
- Aa2.57Below AA
Neutral 100 #F5F5F5
- Aa2.22Below AA
Neutral 200 #E5E5E5
- Aa1.11Below AA
Neutral 400 #A3A3A3
- Aa2.78Below AA
Neutral 600 #525252
- Aa6.39AA
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?
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?
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 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: 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% 0%;
--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% 0%;
--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.
FAQ
Frequently asked questions
shadcn Orange (#F97316) is oklch(0.705 0.187 47.6) in the OKLCH color space.
shadcn Orange passes WCAG 2.2 AA on black for normal text. Contrast ratios: 2.8:1 on white, 7.49:1 on black.
On white, shadcn Orange has an APCA Lc of 53.2. On black, Lc is -48.7. 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 Orange simulates to #c7d132. Under protanopia it shifts to #bfbe2d. Under tritanopia it appears as #f23e42. 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.