paletta
shadcn token

shadcn Indigo Custom in OKLCH

Quick answer: shadcn Indigo Custom is #6366F1, which converts to oklch(0.585 0.204 277.10). On white, it has a WCAG contrast ratio of 4.47:1 and an APCA score of Lc +70.58.

This meets the WCAG 2.2 AA Large text threshold (3:1) on white. 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).

oklch(0.585 0.204 277.10)

Specs

oklch(0.585 0.204 277.10)
#6366F1

Highest contrast: black

4.70:1
Normal AA
Normal AAA
Large AA
Large AAA
Lc -31.09
Try in Studio

Accessibility lens

Protanopia#6464CF
Deuteranopia#6464C7
Tritanopia#63B5AF

How does shadcn Indigo Custom scale from 50 to 950?

shadcn Indigo Custom
50 to 950
#EEF3FF
#CFD8FF
#B0BCFF
#939FFF
#7A82FF
#6366F1
#4C4BCC
#3833A3
#241F76
#130B4D
#050027
  • 50oklch(0.964 0.017 267.79)
  • 100oklch(0.888 0.055 275.01)
  • 200oklch(0.810 0.096 276.21)
  • 300oklch(0.733 0.139 276.98)
  • 400oklch(0.661 0.182 277.42)
  • 500oklch(0.585 0.204 277.12)
  • 600oklch(0.494 0.194 276.95)
  • 700oklch(0.404 0.174 277.22)
  • 800oklch(0.312 0.142 276.82)
  • 900oklch(0.221 0.113 277.28)
  • 950oklch(0.132 0.081 277.60)

How does shadcn Indigo Custom score on WCAG 2.2 contrast?

Every fg × bg combination, with WCAG 2.2 verdicts.

AAA (7:1+)
AA (4.5:1+)
Below AA (under 4.5:1)
Hover for APCA
Aa1.00Below AA
Aa1.65Below AA
Aa2.92Below AA
Aa5.93AA
Aa12.33AAA
Aa18.25AAA
Aa1.65Below AA
Aa1.00Below AA
Aa1.78Below AA
Aa3.60Below AA
Aa7.49AAA
Aa11.09AAA
Aa2.92Below AA
Aa1.78Below AA
Aa1.00Below AA
Aa2.03Below AA
Aa4.22Below AA
Aa6.24AA
Aa5.93AA
Aa3.60Below AA
Aa2.03Below AA
Aa1.00Below AA
Aa2.08Below AA
Aa3.08Below AA
Aa12.33AAA
Aa7.49AAA
Aa4.22Below AA
Aa2.08Below AA
Aa1.00Below AA
Aa1.48Below AA
Aa18.25AAA
Aa11.09AAA
Aa6.24AA
Aa3.08Below AA
Aa1.48Below AA
Aa1.00Below AA

Where should you use shadcn Indigo Custom in production UI?

bg: primary-50 · border: primary-100
Monthly revenue
$48,219
text: primary-900
+12.4% vs last mo.
badge: primary-100 / primary-700
primary-500
$8.2k
JANFEBMARAPRMAYJUNJUL
bg: primary-600 · fg: white
ONBOARDING · STEP 2
Export your first design system this week.
bg: surface · border: neutral-200
SYSTEM
All systems normal
APIprimary-50 / primary-700Webprimary-50 / primary-700Pluginprimary-50 / primary-700
Tokens
248
+18 this week
overlay: primary-700 → primary-800
"Paletta replaced our color brainstorm meetings."
Sora Mehta
Design lead, Northwind
EPISODE 14
Designing color systems that scale
28:14
bg: primary-900
--primary-500
#6366F1
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600button-secondary: primary-50
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

What other Tailwind and shadcn colors look like shadcn Indigo Custom?

:root {
  --background: 240 7% 97%;
  --foreground: 240 6% 10%;
  --card: 240 7% 97%;
  --card-foreground: 240 6% 10%;
  --popover: 240 7% 97%;
  --popover-foreground: 240 6% 10%;
  --primary: 251 57% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 269 58% 86%;
  --secondary-foreground: 268 58% 15%;
  --muted: 240 7% 94%;
  --muted-foreground: 240 6% 50%;
  --accent: 209 58% 86%;
  --accent-foreground: 209 58% 15%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 5% 88%;
  --input: 240 5% 88%;
  --ring: 251 57% 45%;
  --radius: 0.5rem;
}

.dark {
  --background: 240 7% 6%;
  --foreground: 240 7% 97%;
  --card: 240 6% 10%;
  --card-foreground: 240 7% 97%;
  --popover: 240 6% 10%;
  --popover-foreground: 240 7% 97%;
  --primary: 247 47% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 268 59% 24%;
  --secondary-foreground: 269 58% 86%;
  --muted: 240 7% 18%;
  --muted-foreground: 240 6% 64%;
  --accent: 209 59% 24%;
  --accent-foreground: 209 58% 86%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 7% 18%;
  --input: 240 7% 18%;
  --ring: 247 47% 53%;
  --radius: 0.5rem;
}

Frequently asked questions

Ready to build your color system?

Free forever, no credit card, Pro when you need more.

Get started for free See pricing