shadcn Green in OKLCH
Quick answer: shadcn Green is #22C55E, which converts to oklch(0.723 0.192 149.60). On white, it has a WCAG contrast ratio of 2.28:1 and an APCA score of Lc +44.33.
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 Green is a shadcn theme token. This page frames #22C55E as a theme token: paste the :root and .dark blocks below to theme every component at once.
Specs
Highest contrast: black
Accessibility lens
- Base#22C55E
- 300#7BDF91
- 500#22C55E
- 700#007623
Toggle a lens to preview this color under color vision differences.
How does shadcn Green go from primitive to component?
- Primitive
- Semantic
- Component
Primitive
The raw value, before it means anything.
- hex
- #22C55E
- oklch
- oklch(0.723 0.192 149.60)
Semantic
Bound to a role token that UI reads by name.
--primary: #22C55EOne 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 (9.22:1 on #22C55E).
How does shadcn Green scale from 50 to 950?
- 50oklch(0.970 0.038 150.05)
- 100oklch(0.920 0.067 149.53)
- 200oklch(0.872 0.107 149.46)
- 300oklch(0.823 0.145 149.44)
- 400oklch(0.773 0.173 149.50)
- 500oklch(0.723 0.192 149.58)
- 600oklch(0.607 0.175 148.05)
- 700oklch(0.492 0.150 146.02)
- 800oklch(0.378 0.121 144.49)
- 900oklch(0.257 0.088 142.50)
- 950oklch(0.142 0.048 142.50)
How does shadcn Green score on WCAG 2.2 contrast?
Every fg × bg combination, with WCAG 2.2 verdicts.
Does shadcn Green pass WCAG 2.2 on common neutral backgrounds?
- Aa2.28Below AA
White #FFFFFF
- Aa2.09Below AA
Neutral 100 #F5F5F5
- Aa1.81Below AA
Neutral 200 #E5E5E5
- Aa1.11Below AA
Neutral 400 #A3A3A3
- Aa3.43Below AA
Neutral 600 #525252
- Aa7.87AAA
Neutral 900 #171717
- Aa9.22AAA
Black #000000
What palettes pair with shadcn Green?
Analogous
- #6EC522
- #2AC522
- #22C55E
- #22C5A2
- #22A4C5
Complementary
- #52E187
- #22C55E
Triadic
- #22C55E
- #147739
- #5E22C5
Where should you use shadcn Green in production UI?
Notes on shadcn Green
The shadcn green preset is a fresh, slightly cool green, oklch(0.723 0.192 149.6), aimed at success themes and positive accents. It is bright, so the usual rule holds: on white it is Below AA (2.28:1, APCA Lc +44.33), unfit for small text on a light page, while on a near-black surface it reaches WCAG 2.2 AAA (9.22:1, APCA Lc -57.8). The complementary #52E187 keeps a tonal mint, while the triad reaches a deep #147739 and a purple #5E22C5. What sets this green apart is how hard it falls under the accessibility lens: protanopia and deuteranopia desaturate it almost to gray (#696A77 and #5F537D), so for many red-green viewers it barely reads as a color, let alone as green. If this green marks success, it must be joined by an icon or label, and it should never be the only thing separating it from a red destructive state.
What other Tailwind and shadcn colors relate to shadcn Green?
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 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
:root {
--background: 120 7% 97%;
--foreground: 140 6% 10%;
--card: 120 7% 97%;
--card-foreground: 140 6% 10%;
--popover: 120 7% 97%;
--popover-foreground: 140 6% 10%;
--primary: 142 71% 45%;
--primary-foreground: 240 10% 4%;
--secondary: 169 44% 85%;
--secondary-foreground: 170 100% 8%;
--muted: 120 7% 94%;
--muted-foreground: 140 6% 50%;
--accent: 111 51% 85%;
--accent-foreground: 120 100% 8%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 140 5% 88%;
--input: 140 5% 88%;
--ring: 142 71% 45%;
--radius: 0.5rem;
}
.dark {
--background: 150 7% 6%;
--foreground: 120 7% 97%;
--card: 140 6% 10%;
--card-foreground: 120 7% 97%;
--popover: 140 6% 10%;
--popover-foreground: 120 7% 97%;
--primary: 136 59% 58%;
--primary-foreground: 240 10% 4%;
--secondary: 172 100% 14%;
--secondary-foreground: 169 44% 85%;
--muted: 140 7% 18%;
--muted-foreground: 142 6% 64%;
--accent: 120 100% 14%;
--accent-foreground: 111 51% 85%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 140 7% 18%;
--input: 140 7% 18%;
--ring: 136 59% 58%;
--radius: 0.5rem;
}How do you export shadcn Green as design tokens?
Export a W3C DTCG token document for the shadcn Green 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.