OKLCH Studio
shadcn/ui themes in OKLCH: every base and accent colour with hex and contrast
shadcn/ui (the v4 / Tailwind v4 version) defines its theme colours as OKLCH CSS variables in globals.css, one set for :root and one for .dark. A base colour (neutral, zinc, slate and so on) defines the full token set; an accent theme (blue, rose and so on) only overrides primary, secondary, chart and sidebar-primary tokens on top of a base. Each page lists every value verbatim with its hex and a WCAG contrast audit of the standard foreground/background pairs.
Data comes from the shadcn/ui themes and the shadcn-ui/ui source (MIT licence, © 2023 shadcn). Hex values are sRGB-mapped from the OKLCH values; accent themes are layered over the neutral base for contrast. This is an independent reference, not affiliated with shadcn/ui.
26 themes (9 base, 17 accent). 224 of the 933 colour values the themes define fall outside sRGB, so their hex is a clipped approximation. Of 572 checked text/background pairs, 50 are below WCAG AA 4.5:1; 25 of 26 themes have at least one.
Tailwind v4 colors →Tailwind v3 → v4 mapping →Contrast checker →Accessible palettes →Contrast fix pages →Color converters →
Base colours (9)
| Theme | Light swatches | Dark swatches | Primary hex (light / dark) | AA pairs |
|---|---|---|---|---|
| Neutral | #171717 / #e5e5e5 | 21/22 pass · 1 fail | ||
| Stone | #1c1917 / #e7e5e4 | 21/22 pass · 1 fail | ||
| Zinc | #18181b / #e4e4e7 | 21/22 pass · 1 fail | ||
| Mauve | #1d161e / #e7e4e7 | 22/22 pass | ||
| Olive | #1d1d16 / #e8e8e3 | 20/22 pass · 2 fail | ||
| Mist | #161b1d / #e3e7e8 | 21/22 pass · 1 fail | ||
| Taupe | #1d1816 / #e8e4e3 | 21/22 pass · 1 fail | ||
| Gray | #101828 / #e5e7eb | 21/22 pass · 1 fail | ||
| Slate | #0f172b / #e2e8f0 | 21/22 pass · 1 fail |
Accent themes (17)
Shown layered over the neutral base colour.
| Theme | Light swatches | Dark swatches | Primary hex (light / dark) | AA pairs |
|---|---|---|---|---|
| Amber | #bb4d00 / #973c00 | 20/22 pass · 2 fail | ||
| Blue | #1447e6 / #193cb8 | 20/22 pass · 2 fail | ||
| Cyan | #007595 / #005f78 | 20/22 pass · 2 fail | ||
| Emerald | #007a55 / #006045 | 20/22 pass · 2 fail | ||
| Fuchsia | #a800b7 / #8a0194 | 19/22 pass · 3 fail | ||
| Green | #008236 / #016630 | 19/22 pass · 3 fail | ||
| Indigo | #432dd7 / #372aac | 20/22 pass · 2 fail | ||
| Lime | #9ae600 / #7ccf00 | 20/22 pass · 2 fail | ||
| Orange | #ca3500 / #9f2d00 | 19/22 pass · 3 fail | ||
| Pink | #c6005c / #a3004c | 19/22 pass · 3 fail | ||
| Purple | #8200db / #6e11b0 | 20/22 pass · 2 fail | ||
| Red | #c10007 / #9f0712 | 19/22 pass · 3 fail | ||
| Rose | #c70036 / #a50036 | 19/22 pass · 3 fail | ||
| Sky | #0069a8 / #00598a | 20/22 pass · 2 fail | ||
| Teal | #00786f / #005f5a | 20/22 pass · 2 fail | ||
| Violet | #7008e7 / #5d0ec0 | 20/22 pass · 2 fail | ||
| Yellow | #fdc700 / #f0b100 | 19/22 pass · 3 fail |
FAQ
- What is the difference between a shadcn/ui base colour and an accent theme?
- A base colour (9 here: neutral, stone, zinc, mauve, olive, mist, taupe, gray, slate) defines the whole token set for light and dark mode: background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, chart-1 to chart-5 and the sidebar tokens. An accent theme (17 here, such as blue or rose) only overrides primary, secondary, the chart colours and sidebar-primary, and is applied on top of a base colour. For contrast numbers we layer accents over neutral, shadcn's default base colour.
- Why are shadcn/ui colours in OKLCH?
- The Tailwind v4 version of shadcn/ui writes theme colours as oklch() values in CSS variables in globals.css. OKLCH is perceptually uniform, so lightness is predictable across hues, and it can express colours outside sRGB on wide-gamut displays. Browsers that do not support oklch() need a hex fallback; every theme page includes one.
- How do I use one of these themes?
- Paste the :root and .dark variables from a theme page into your globals.css. For an accent theme, paste only its overrides on top of a base colour you already have. Make sure the @theme inline block maps each variable to a Tailwind colour (--color-primary: var(--primary), and so on) so utilities like bg-primary work. Theme pages show all three blocks with a copy button.
- Does muted-foreground pass WCAG AA in shadcn/ui themes?
- Mostly not on the muted background. Across 52 theme and mode combinations (accent themes repeat the neutral values they sit on), muted-foreground on muted passes AA 4.5:1 in 27 and fails in 25, with ratios from 3.86 to 6.14. On the page background it passes in 51 of 52 (lowest 4.25). All of them reach the 3:1 large-text level, but small body text on a muted surface needs a darker or lighter foreground.
- How do the older shadcn/ui HSL variables relate to the OKLCH ones?
- Earlier shadcn/ui releases for Tailwind v3 stored colours as bare HSL components, for example --primary: 240 5.9% 10%, and consumed them as hsl(var(--primary)) in tailwind.config. The Tailwind v4 version stores complete oklch() values and maps them with @theme inline. A bare HSL triple and an oklch() value are different notations, so they cannot be swapped textually: convert the colour, and expect small rounding or gamut differences. You can convert an HSL value to hex and then to OKLCH with the converters linked below.
Related
OKLCH Studio is a free OKLCH contrast checker with auto-fix and colour converters. Looking for pairs, names or brand palettes? See the separate Colorise Pro workspace.