OKLCH Studio · shadcn/ui accent theme
shadcn/ui Rose theme colors: primary oklch(0.514 0.222 16.935) & chart tokens
shadcn/ui Rose: primary #c70036 light / #a50036 dark (oklch(0.514 0.222 16.935)). 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.
Rose 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 | |
| --primaryrose | oklch(0.514 0.222 16.935) | #c70036 | No — hex is clipped | |
| --primary-foregroundrose | oklch(0.969 0.015 12.422) | #fff1f2 | Yes | |
| --secondaryrose | oklch(0.967 0.001 286.375) | #f4f4f5 | Yes | |
| --secondary-foregroundrose | 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-1rose | oklch(0.81 0.117 11.638) | #ffa1ad | No — hex is clipped | |
| --chart-2rose | oklch(0.645 0.246 16.439) | #ff2056 | No — hex is clipped | |
| --chart-3rose | oklch(0.586 0.253 17.585) | #ec003f | No — hex is clipped | |
| --chart-4rose | oklch(0.514 0.222 16.935) | #c70036 | No — hex is clipped | |
| --chart-5rose | oklch(0.455 0.188 13.697) | #a50036 | No — hex is clipped | |
| --sidebar | oklch(0.985 0 0) | #fafafa | Yes | |
| --sidebar-foreground | oklch(0.145 0 0) | #0a0a0a | Yes | |
| --sidebar-primaryrose | oklch(0.586 0.253 17.585) | #ec003f | No — hex is clipped | |
| --sidebar-primary-foregroundrose | oklch(0.969 0.015 12.422) | #fff1f2 | 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 | |
| --primaryrose | oklch(0.455 0.188 13.697) | #a50036 | No — hex is clipped | |
| --primary-foregroundrose | oklch(0.969 0.015 12.422) | #fff1f2 | Yes | |
| --secondaryrose | oklch(0.274 0.006 286.033) | #27272a | Yes | |
| --secondary-foregroundrose | 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-1rose | oklch(0.81 0.117 11.638) | #ffa1ad | No — hex is clipped | |
| --chart-2rose | oklch(0.645 0.246 16.439) | #ff2056 | No — hex is clipped | |
| --chart-3rose | oklch(0.586 0.253 17.585) | #ec003f | No — hex is clipped | |
| --chart-4rose | oklch(0.514 0.222 16.935) | #c70036 | No — hex is clipped | |
| --chart-5rose | oklch(0.455 0.188 13.697) | #a50036 | No — hex is clipped | |
| --sidebarrose | oklch(0.21 0.006 285.885) | #18181b | Yes | |
| --sidebar-foreground | oklch(0.985 0 0) | #fafafa | Yes | |
| --sidebar-primaryrose | oklch(0.645 0.246 16.439) | #ff2056 | No — hex is clipped | |
| --sidebar-primary-foregroundrose | oklch(0.969 0.015 12.422) | #fff1f2 | 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#fff1f2 on #c70036 | 5.48:1 | -76 | 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#fff1f2 on #ec003f | 4.12:1 | -67 | Fail | Pass | Set sidebar-primary-foreground to oklch(0.089 0.015 12.4) (#050102, 4.58:1). |
| 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#fff1f2 on #a50036 | 7.20:1 | -83 | 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 #18181b | 16.97:1 | -103 | Pass | Pass | |
| sidebar-primary-foreground on sidebar-primary#fff1f2 on #ff2056 | 3.41:1 | -61 | Fail | Pass | Set sidebar-primary-foreground to oklch(0.209 0.015 12.4) (#1f1516, 4.75:1). |
Copy code
These are only the variables the Rose 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.514 0.222 16.935);
--primary-foreground: oklch(0.969 0.015 12.422);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--chart-1: oklch(0.81 0.117 11.638);
--chart-2: oklch(0.645 0.246 16.439);
--chart-3: oklch(0.586 0.253 17.585);
--chart-4: oklch(0.514 0.222 16.935);
--chart-5: oklch(0.455 0.188 13.697);
--sidebar-primary: oklch(0.586 0.253 17.585);
--sidebar-primary-foreground: oklch(0.969 0.015 12.422);
}
.dark {
--primary: oklch(0.455 0.188 13.697);
--primary-foreground: oklch(0.969 0.015 12.422);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--chart-1: oklch(0.81 0.117 11.638);
--chart-2: oklch(0.645 0.246 16.439);
--chart-3: oklch(0.586 0.253 17.585);
--chart-4: oklch(0.514 0.222 16.935);
--chart-5: oklch(0.455 0.188 13.697);
--sidebar: oklch(0.21 0.006 285.885);
--sidebar-primary: oklch(0.645 0.246 16.439);
--sidebar-primary-foreground: oklch(0.969 0.015 12.422);
}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: var(--sidebar);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
}Hex fallback (for tools without OKLCH support)
:root {
--primary: #c70036;
--primary-foreground: #fff1f2;
--secondary: #f4f4f5;
--secondary-foreground: #18181b;
--chart-1: #ffa1ad;
--chart-2: #ff2056;
--chart-3: #ec003f;
--chart-4: #c70036;
--chart-5: #a50036;
--sidebar-primary: #ec003f;
--sidebar-primary-foreground: #fff1f2;
}
.dark {
--primary: #a50036;
--primary-foreground: #fff1f2;
--secondary: #27272a;
--secondary-foreground: #fafafa;
--chart-1: #ffa1ad;
--chart-2: #ff2056;
--chart-3: #ec003f;
--chart-4: #c70036;
--chart-5: #a50036;
--sidebar: #18181b;
--sidebar-primary: #ff2056;
--sidebar-primary-foreground: #fff1f2;
}Related colours
Light primary: oklch(0.514 0.222 16.935) · #c70036