OKLCH Studio · shadcn/ui accent theme

shadcn/ui Lime theme colors: primary oklch(0.841 0.238 128.85) & chart tokens

shadcn/ui Lime: primary #9ae600 light / #7ccf00 dark (oklch(0.841 0.238 128.85)). 20 of 22 checked pairs meet WCAG AA 4.5:1 (light 9/11, dark 11/11). Copy the accent overrides on the neutral base as OKLCH, @theme mapping or hex.

Lime 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

light

Card title

Muted description text on the card.

PrimarySecondaryAccentDestructive

Muted block with input border

dark

light mode tokens

Lime light mode colour tokens with oklch, hex and sRGB gamut
Token	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
--primarylime	oklch(0.841 0.238 128.85)	#9ae600	No — hex is clipped
--primary-foregroundlime	oklch(0.405 0.101 131.063)	#35530e	Yes
--secondarylime	oklch(0.967 0.001 286.375)	#f4f4f5	Yes
--secondary-foregroundlime	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-1lime	oklch(0.897 0.196 126.665)	#bbf451	Yes
--chart-2lime	oklch(0.768 0.233 130.85)	#7ccf00	No — hex is clipped
--chart-3lime	oklch(0.648 0.2 131.684)	#5ea500	No — hex is clipped
--chart-4lime	oklch(0.532 0.157 131.589)	#497d00	No — hex is clipped
--chart-5lime	oklch(0.453 0.124 130.933)	#3c6300	No — hex is clipped
--sidebar	oklch(0.985 0 0)	#fafafa	Yes
--sidebar-foreground	oklch(0.145 0 0)	#0a0a0a	Yes
--sidebar-primarylime	oklch(0.648 0.2 131.684)	#5ea500	No — hex is clipped
--sidebar-primary-foregroundlime	oklch(0.986 0.031 120.757)	#f7fee7	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

Lime dark mode colour tokens with oklch, hex and sRGB gamut
Token	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
--primarylime	oklch(0.768 0.233 130.85)	#7ccf00	No — hex is clipped
--primary-foregroundlime	oklch(0.405 0.101 131.063)	#35530e	Yes
--secondarylime	oklch(0.274 0.006 286.033)	#27272a	Yes
--secondary-foregroundlime	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-1lime	oklch(0.897 0.196 126.665)	#bbf451	Yes
--chart-2lime	oklch(0.768 0.233 130.85)	#7ccf00	No — hex is clipped
--chart-3lime	oklch(0.648 0.2 131.684)	#5ea500	No — hex is clipped
--chart-4lime	oklch(0.532 0.157 131.589)	#497d00	No — hex is clipped
--chart-5lime	oklch(0.453 0.124 130.933)	#3c6300	No — hex is clipped
--sidebar	oklch(0.205 0 0)	#171717	Yes
--sidebar-foreground	oklch(0.985 0 0)	#fafafa	Yes
--sidebar-primarylime	oklch(0.768 0.233 130.85)	#7ccf00	No — hex is clipped
--sidebar-primary-foregroundlime	oklch(0.274 0.072 132.109)	#192e03	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)

20 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.

light mode
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#35530e on #9ae600	5.71:1	63	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#f7fee7 on #5ea500	2.95:1	-60	Fail	Fail	Set sidebar-primary-foreground to oklch(0.266 0.031 120.8) (#232816, 4.94:1).

dark mode
Pair	Ratio	APCA Lc	AA 4.5	AA large 3
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#35530e on #7ccf00	4.50:1	51	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#192e03 on #7ccf00	7.52:1	62	Pass	Pass

Copy code

These are only the variables the Lime 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.841 0.238 128.85);
  --primary-foreground: oklch(0.405 0.101 131.063);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --chart-1: oklch(0.897 0.196 126.665);
  --chart-2: oklch(0.768 0.233 130.85);
  --chart-3: oklch(0.648 0.2 131.684);
  --chart-4: oklch(0.532 0.157 131.589);
  --chart-5: oklch(0.453 0.124 130.933);
  --sidebar-primary: oklch(0.648 0.2 131.684);
  --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
}

.dark {
  --primary: oklch(0.768 0.233 130.85);
  --primary-foreground: oklch(0.405 0.101 131.063);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --chart-1: oklch(0.897 0.196 126.665);
  --chart-2: oklch(0.768 0.233 130.85);
  --chart-3: oklch(0.648 0.2 131.684);
  --chart-4: oklch(0.532 0.157 131.589);
  --chart-5: oklch(0.453 0.124 130.933);
  --sidebar-primary: oklch(0.768 0.233 130.85);
  --sidebar-primary-foreground: oklch(0.274 0.072 132.109);
}

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: #9ae600;
  --primary-foreground: #35530e;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --chart-1: #bbf451;
  --chart-2: #7ccf00;
  --chart-3: #5ea500;
  --chart-4: #497d00;
  --chart-5: #3c6300;
  --sidebar-primary: #5ea500;
  --sidebar-primary-foreground: #f7fee7;
}

.dark {
  --primary: #7ccf00;
  --primary-foreground: #35530e;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --chart-1: #bbf451;
  --chart-2: #7ccf00;
  --chart-3: #5ea500;
  --chart-4: #497d00;
  --chart-5: #3c6300;
  --sidebar-primary: #7ccf00;
  --sidebar-primary-foreground: #192e03;
}

Related colours

Light primary: oklch(0.841 0.238 128.85) · #9ae600

← All shadcn/ui themes