OKLCH Studio · shadcn/ui accent theme
shadcn/ui Red theme colors: primary oklch(0.505 0.213 27.518) & chart tokens
shadcn/ui Red: primary #c10007 light / #9f0712 dark (oklch(0.505 0.213 27.518)). 19 of 22 checked pairs meet WCAG AA 4.5:1 (light 9/11, dark 10/11). Copy the accent overrides on the neutral base as OKLCH, @theme mapping or hex.
Red is an accent theme: it overrides primary, secondary, the chart colours and sidebar-primary, and sits on top of a base colour. Every other value below comes from the neutral base (shadcn's default), and the contrast audit uses that combination. Source: shadcn/ui (MIT, © 2023 shadcn); all themes.
Preview
Card title
Muted description text on the card.
PrimarySecondaryAccentDestructive
Muted block with input border
Card title
Muted description text on the card.
PrimarySecondaryAccentDestructive
Muted block with input border
light mode tokens
| Token | Swatch | oklch() | Hex | In sRGB |
|---|---|---|---|---|
| --background | oklch(1 0 0) | #ffffff | Yes | |
| --foreground | oklch(0.145 0 0) | #0a0a0a | Yes | |
| --card | oklch(1 0 0) | #ffffff | Yes | |
| --card-foreground | oklch(0.145 0 0) | #0a0a0a | Yes | |
| --popover | oklch(1 0 0) | #ffffff | Yes | |
| --popover-foreground | oklch(0.145 0 0) | #0a0a0a | Yes | |
| --primaryred | oklch(0.505 0.213 27.518) | #c10007 | No — hex is clipped | |
| --primary-foregroundred | oklch(0.971 0.013 17.38) | #fef2f2 | Yes | |
| --secondaryred | oklch(0.967 0.001 286.375) | #f4f4f5 | Yes | |
| --secondary-foregroundred | oklch(0.21 0.006 285.885) | #18181b | Yes | |
| --muted | oklch(0.97 0 0) | #f5f5f5 | Yes | |
| --muted-foreground | oklch(0.556 0 0) | #737373 | Yes | |
| --accent | oklch(0.97 0 0) | #f5f5f5 | Yes | |
| --accent-foreground | oklch(0.205 0 0) | #171717 | Yes | |
| --destructive | oklch(0.577 0.245 27.325) | #e7000b | No — hex is clipped | |
| --border | oklch(0.922 0 0) | #e5e5e5 | Yes | |
| --input | oklch(0.922 0 0) | #e5e5e5 | Yes | |
| --ring | oklch(0.708 0 0) | #a1a1a1 | Yes | |
| --chart-1red | oklch(0.808 0.114 19.571) | #ffa2a2 | No — hex is clipped | |
| --chart-2red | oklch(0.637 0.237 25.331) | #fb2c36 | Yes | |
| --chart-3red | oklch(0.577 0.245 27.325) | #e7000b | No — hex is clipped | |
| --chart-4red | oklch(0.505 0.213 27.518) | #c10007 | No — hex is clipped | |
| --chart-5red | oklch(0.444 0.177 26.899) | #9f0712 | Yes | |
| --sidebar | oklch(0.985 0 0) | #fafafa | Yes | |
| --sidebar-foreground | oklch(0.145 0 0) | #0a0a0a | Yes | |
| --sidebar-primaryred | oklch(0.577 0.245 27.325) | #e7000b | No — hex is clipped | |
| --sidebar-primary-foregroundred | oklch(0.971 0.013 17.38) | #fef2f2 | Yes | |
| --sidebar-accent | oklch(0.97 0 0) | #f5f5f5 | Yes | |
| --sidebar-accent-foreground | oklch(0.205 0 0) | #171717 | Yes | |
| --sidebar-border | oklch(0.922 0 0) | #e5e5e5 | Yes | |
| --sidebar-ring | oklch(0.708 0 0) | #a1a1a1 | Yes |
dark mode tokens
| Token | Swatch | oklch() | Hex | In sRGB |
|---|---|---|---|---|
| --background | oklch(0.145 0 0) | #0a0a0a | Yes | |
| --foreground | oklch(0.985 0 0) | #fafafa | Yes | |
| --card | oklch(0.205 0 0) | #171717 | Yes | |
| --card-foreground | oklch(0.985 0 0) | #fafafa | Yes | |
| --popover | oklch(0.205 0 0) | #171717 | Yes | |
| --popover-foreground | oklch(0.985 0 0) | #fafafa | Yes | |
| --primaryred | oklch(0.444 0.177 26.899) | #9f0712 | Yes | |
| --primary-foregroundred | oklch(0.971 0.013 17.38) | #fef2f2 | Yes | |
| --secondaryred | oklch(0.274 0.006 286.033) | #27272a | Yes | |
| --secondary-foregroundred | oklch(0.985 0 0) | #fafafa | Yes | |
| --muted | oklch(0.269 0 0) | #262626 | Yes | |
| --muted-foreground | oklch(0.708 0 0) | #a1a1a1 | Yes | |
| --accent | oklch(0.269 0 0) | #262626 | Yes | |
| --accent-foreground | oklch(0.985 0 0) | #fafafa | Yes | |
| --destructive | oklch(0.704 0.191 22.216) | #ff6467 | No — hex is clipped | |
| --border | oklch(1 0 0 / 10%) | #ffffff (10% alpha) | Yes | |
| --input | oklch(1 0 0 / 15%) | #ffffff (15% alpha) | Yes | |
| --ring | oklch(0.556 0 0) | #737373 | Yes | |
| --chart-1red | oklch(0.808 0.114 19.571) | #ffa2a2 | No — hex is clipped | |
| --chart-2red | oklch(0.637 0.237 25.331) | #fb2c36 | Yes | |
| --chart-3red | oklch(0.577 0.245 27.325) | #e7000b | No — hex is clipped | |
| --chart-4red | oklch(0.505 0.213 27.518) | #c10007 | No — hex is clipped | |
| --chart-5red | oklch(0.444 0.177 26.899) | #9f0712 | Yes | |
| --sidebar | oklch(0.205 0 0) | #171717 | Yes | |
| --sidebar-foreground | oklch(0.985 0 0) | #fafafa | Yes | |
| --sidebar-primaryred | oklch(0.637 0.237 25.331) | #fb2c36 | Yes | |
| --sidebar-primary-foregroundred | oklch(0.971 0.013 17.38) | #fef2f2 | Yes | |
| --sidebar-accent | oklch(0.269 0 0) | #262626 | Yes | |
| --sidebar-accent-foreground | oklch(0.985 0 0) | #fafafa | Yes | |
| --sidebar-border | oklch(1 0 0 / 10%) | #ffffff (10% alpha) | Yes | |
| --sidebar-ring | oklch(0.556 0 0) | #737373 | Yes |
Contrast audit (WCAG 2)
19 of 22 checked pairs meet AA 4.5:1. Pairs with a translucent side are skipped. A suggested fix keeps hue and chroma and moves the foreground's lightness to the nearest AA value, using the same logic as the contrast checker.
| Pair | Ratio | APCA Lc | AA 4.5 | AA large 3 | Fix / details |
|---|---|---|---|---|---|
| foreground on background#0a0a0a on #ffffff | 19.79:1 | 106 | Pass | Pass | Pair page → |
| card-foreground on card#0a0a0a on #ffffff | 19.79:1 | 106 | Pass | Pass | Pair page → |
| popover-foreground on popover#0a0a0a on #ffffff | 19.79:1 | 106 | Pass | Pass | Pair page → |
| primary-foreground on primary#fef2f2 on #c10007 | 5.86:1 | -77 | Pass | Pass | |
| secondary-foreground on secondary#18181b on #f4f4f5 | 16.11:1 | 98 | Pass | Pass | |
| muted-foreground on muted#737373 on #f5f5f5 | 4.34:1 | 67 | Fail | Pass | Set muted-foreground to oklch(0.516 0.000 0.0) (#676767, 5.18:1). |
| muted-foreground on background#737373 on #ffffff | 4.74:1 | 73 | Pass | Pass | Pair page → |
| accent-foreground on accent#171717 on #f5f5f5 | 16.44:1 | 99 | Pass | Pass | |
| destructive on background#e7000b on #ffffff | 4.76:1 | 70 | Pass | Pass | Pair page → |
| sidebar-foreground on sidebar#0a0a0a on #fafafa | 18.96:1 | 103 | Pass | Pass | |
| sidebar-primary-foreground on sidebar-primary#fef2f2 on #e7000b | 4.35:1 | -69 | Fail | Pass | No AA lightness found for sidebar-primary-foreground. |
| Pair | Ratio | APCA Lc | AA 4.5 | AA large 3 | Fix / details |
|---|---|---|---|---|---|
| foreground on background#fafafa on #0a0a0a | 18.96:1 | -104 | Pass | Pass | |
| card-foreground on card#fafafa on #171717 | 17.17:1 | -104 | Pass | Pass | |
| popover-foreground on popover#fafafa on #171717 | 17.17:1 | -104 | Pass | Pass | |
| primary-foreground on primary#fef2f2 on #9f0712 | 7.63:1 | -84 | Pass | Pass | |
| secondary-foreground on secondary#fafafa on #27272a | 14.27:1 | -101 | Pass | Pass | |
| muted-foreground on muted#a1a1a1 on #262626 | 5.85:1 | -48 | Pass | Pass | |
| muted-foreground on background#a1a1a1 on #0a0a0a | 7.66:1 | -51 | Pass | Pass | |
| accent-foreground on accent#fafafa on #262626 | 14.49:1 | -101 | Pass | Pass | |
| destructive on background#ff6467 on #0a0a0a | 6.85:1 | -47 | Pass | Pass | |
| sidebar-foreground on sidebar#fafafa on #171717 | 17.17:1 | -104 | Pass | Pass | |
| sidebar-primary-foreground on sidebar-primary#fef2f2 on #fb2c36 | 3.48:1 | -62 | Fail | Pass | Set sidebar-primary-foreground to oklch(0.211 0.013 17.4) (#1e1616, 4.66:1). |
Copy code
These are only the variables the Red accent theme overrides. Add them after a base colour's variables in your globals.css.
shadcn/ui v4 globals.css (OKLCH)
:root {
--primary: oklch(0.505 0.213 27.518);
--primary-foreground: oklch(0.971 0.013 17.38);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--chart-1: oklch(0.808 0.114 19.571);
--chart-2: oklch(0.637 0.237 25.331);
--chart-3: oklch(0.577 0.245 27.325);
--chart-4: oklch(0.505 0.213 27.518);
--chart-5: oklch(0.444 0.177 26.899);
--sidebar-primary: oklch(0.577 0.245 27.325);
--sidebar-primary-foreground: oklch(0.971 0.013 17.38);
}
.dark {
--primary: oklch(0.444 0.177 26.899);
--primary-foreground: oklch(0.971 0.013 17.38);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--chart-1: oklch(0.808 0.114 19.571);
--chart-2: oklch(0.637 0.237 25.331);
--chart-3: oklch(0.577 0.245 27.325);
--chart-4: oklch(0.505 0.213 27.518);
--chart-5: oklch(0.444 0.177 26.899);
--sidebar-primary: oklch(0.637 0.237 25.331);
--sidebar-primary-foreground: oklch(0.971 0.013 17.38);
}Tailwind v4 @theme inline mapping
@theme inline {
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
}Hex fallback (for tools without OKLCH support)
:root {
--primary: #c10007;
--primary-foreground: #fef2f2;
--secondary: #f4f4f5;
--secondary-foreground: #18181b;
--chart-1: #ffa2a2;
--chart-2: #fb2c36;
--chart-3: #e7000b;
--chart-4: #c10007;
--chart-5: #9f0712;
--sidebar-primary: #e7000b;
--sidebar-primary-foreground: #fef2f2;
}
.dark {
--primary: #9f0712;
--primary-foreground: #fef2f2;
--secondary: #27272a;
--secondary-foreground: #fafafa;
--chart-1: #ffa2a2;
--chart-2: #fb2c36;
--chart-3: #e7000b;
--chart-4: #c10007;
--chart-5: #9f0712;
--sidebar-primary: #fb2c36;
--sidebar-primary-foreground: #fef2f2;
}Related colours
Light primary: oklch(0.505 0.213 27.518) · #c10007