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)

shadcn Indigo Custom is a shadcn theme token. This page frames #6366F1 as a theme token: paste the :root and .dark blocks below to theme every component at once.

Specs

oklch(0.585 0.204 277.10)
#6366F1

Highest contrast: black

4.70:1
Normal AAmeets WCAG 2.2
Normal AAAdoes not meet WCAG 2.2
Large AAmeets WCAG 2.2
Large AAAmeets WCAG 2.2
Lc -31.09
Try in Studio

Accessibility lens

  • Base#6366F1
  • 300#939FFF
  • 500#6366F1
  • 700#3833A3

Toggle a lens to preview this color under color vision differences.

How does shadcn Indigo Custom go from primitive to component?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#6366F1
oklch
oklch(0.585 0.204 277.10)

Semantic

Bound to a role token that UI reads by name.

--primary: #6366F1

One primitive feeds the role. --primary then drives --ring and the hover and active states below, so a single value stays in sync everywhere.

Component

Applied to real UI across states.

AA4.70:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (4.70:1 on #6366F1).

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

Does shadcn Indigo Custom pass WCAG 2.2 on common neutral backgrounds?

  • Aa4.47Below AA

    White #FFFFFF

  • Aa4.10Below AA

    Neutral 100 #F5F5F5

  • Aa3.55Below AA

    Neutral 200 #E5E5E5

  • Aa1.77Below AA

    Neutral 400 #A3A3A3

  • Aa1.75Below AA

    Neutral 600 #525252

  • Aa4.01Below AA

    Neutral 900 #171717

  • Aa4.70AA

    Black #000000

What palettes pair with shadcn Indigo Custom?

Analogous

  • #63DCF1
  • #63A1F1
  • #6366F1
  • #9B63F1
  • #D663F1

Complementary

  • #A9ABF7
  • #6366F1

Triadic

  • #6366F1
  • #1419E4
  • #F16366

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
"One color system, every screen in sync."
Maya Okafor
Design systems lead
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

Notes on shadcn Indigo Custom

Indigo Custom lands one notch cooler and softer than a pure blue, oklch(0.585 0.204 277.1), a friendly indigo that works as a primary or a link. It is the near-miss of this set worth knowing about: as text on white it measures 4.47:1, which is AA Large, just three hundredths under the 4.5 needed for WCAG 2.2 AA on normal text, so do not assume small indigo copy on white is compliant, size it up or use a darker stop. On a near-black surface it actually does better at AA (4.7:1, APCA Lc -31.09). The triad throws an electric #1419E4 and a coral #F16366, while #A9ABF7 is a gentle tint for hovers. Under the accessibility lens indigo is stable for red-green vision (protanopia sits at #6464CF, almost unchanged), which is a point in its favor; tritanopia pulls it to teal (#63B5AF), so keep any indigo-versus-teal signal backed by text.

What other Tailwind and shadcn colors relate to shadcn Indigo Custom?

Browse all colors

: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: 239 84% 67%;
  --primary-foreground: 0 0% 100%;
  --secondary: 266 95% 92%;
  --secondary-foreground: 272 58% 15%;
  --muted: 240 7% 94%;
  --muted-foreground: 240 6% 50%;
  --accent: 208 75% 91%;
  --accent-foreground: 208 67% 13%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 5% 88%;
  --input: 240 5% 88%;
  --ring: 239 84% 67%;
  --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: 236 100% 74%;
  --primary-foreground: 0 0% 100%;
  --secondary: 270 44% 27%;
  --secondary-foreground: 266 95% 92%;
  --muted: 240 7% 18%;
  --muted-foreground: 240 6% 64%;
  --accent: 209 47% 25%;
  --accent-foreground: 208 75% 91%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 7% 18%;
  --input: 240 7% 18%;
  --ring: 236 100% 74%;
  --radius: 0.5rem;
}

How do you export shadcn Indigo Custom as design tokens?

Export a W3C DTCG token document for the shadcn Indigo Custom 50 to 950 scale, ready for Style Dictionary or any DTCG aware pipeline.

Frequently asked questions

Ready to build your color system?

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

Built by a product designer who ships to code.

Generate system See pricing