paletta
shadcn token

shadcn Violet in OKLCH

Quick answer: shadcn Violet is #8B5CF6, which converts to oklch(0.606 0.219 292.70). On white, it has a WCAG contrast ratio of 4.23:1 and an APCA score of Lc +68.72.

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.606 0.219 292.70)

shadcn Violet is a shadcn theme token. This page frames #8B5CF6 as a theme token: paste the :root and .dark blocks below to theme every component at once.

Specs

oklch(0.606 0.219 292.70)
#8B5CF6

Highest contrast: black

4.96:1
Normal AA
Normal AAA
Large AA
Large AAA
Lc -32.94
Try in Studio

Accessibility lens

  • Base#8B5CF6
  • 300#B398FF
  • 500#8B5CF6
  • 700#5427A5

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

How does shadcn Violet go from primitive to component?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#8B5CF6
oklch
oklch(0.606 0.219 292.70)

Semantic

Bound to a role token that UI reads by name.

--primary: #8B5CF6

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.96:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (4.96:1 on #8B5CF6).

How does shadcn Violet scale from 50 to 950?

shadcn Violet
50 to 950
#F5F0FF
#DED4FF
#C8B7FF
#B398FF
#9F7AFF
#8B5CF6
#6F40CF
#5427A5
#3A1478
#21024D
#0B0026
  • 50oklch(0.963 0.021 301.15)
  • 100oklch(0.892 0.059 295.83)
  • 200oklch(0.819 0.101 294.90)
  • 300oklch(0.745 0.147 294.63)
  • 400oklch(0.676 0.190 293.49)
  • 500oklch(0.606 0.219 292.72)
  • 600oklch(0.510 0.207 292.57)
  • 700oklch(0.415 0.186 292.57)
  • 800oklch(0.321 0.154 292.63)
  • 900oklch(0.224 0.121 292.47)
  • 950oklch(0.139 0.079 289.78)

How does shadcn Violet 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.61Below AA
Aa2.80Below AA
Aa5.68AA
Aa12.11AAA
Aa18.03AAA
Aa1.61Below AA
Aa1.00Below AA
Aa1.74Below AA
Aa3.53Below AA
Aa7.53AAA
Aa11.20AAA
Aa2.80Below AA
Aa1.74Below AA
Aa1.00Below AA
Aa2.02Below AA
Aa4.32Below AA
Aa6.43AA
Aa5.68AA
Aa3.53Below AA
Aa2.02Below AA
Aa1.00Below AA
Aa2.13Below AA
Aa3.18Below AA
Aa12.11AAA
Aa7.53AAA
Aa4.32Below AA
Aa2.13Below AA
Aa1.00Below AA
Aa1.49Below AA
Aa18.03AAA
Aa11.20AAA
Aa6.43AA
Aa3.18Below AA
Aa1.49Below AA
Aa1.00Below AA

Does shadcn Violet pass WCAG 2.2 on common neutral backgrounds?

  • Aa4.23Below AA

    White #FFFFFF

  • Aa3.88Below AA

    Neutral 100 #F5F5F5

  • Aa3.36Below AA

    Neutral 200 #E5E5E5

  • Aa1.68Below AA

    Neutral 400 #A3A3A3

  • Aa1.85Below AA

    Neutral 600 #525252

  • Aa4.23Below AA

    Neutral 900 #171717

  • Aa4.96AA

    Black #000000

What palettes pair with shadcn Violet?

Analogous

  • #5CADF6
  • #5C6DF6
  • #8B5CF6
  • #CB5CF6
  • #F65CE1

Complementary

  • #BFA4FA
  • #8B5CF6

Triadic

  • #8B5CF6
  • #500DE9
  • #F68B5C

Where should you use shadcn Violet 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
#8B5CF6
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 Violet

Violet is the shadcn accent for themes that want personality without going fully saturated, oklch(0.606 0.219 292.7), a lavender-forward purple that suits primaries, highlights, and gradients. It is near-balanced across modes: as white text on a violet fill it reads AA Large (4.23:1) under WCAG 2.2, enough for a large button label but not small copy, and as text on a near-black card it improves to AA (4.96:1, APCA Lc -32.94). Treat the white side as the size-sensitive one. For range, the analogous set runs from blue #5C6DF6 to magenta #CB5CF6, a clean gradient, and the triad answers with a coral #F68B5C. Neutral slate chrome lets the violet stay the accent. Under the accessibility lens the red channel fades: protanopia and deuteranopia pull it toward blue (#797DC8), so violet and blue can merge, while tritanopia mutes it to teal-green (#89B3AD). Keep any violet-versus-blue distinction reinforced by more than hue.

What other Tailwind and shadcn colors relate to shadcn Violet?

Browse all colors

:root {
  --background: 240 7% 97%;
  --foreground: 260 6% 10%;
  --card: 240 7% 97%;
  --card-foreground: 260 6% 10%;
  --popover: 240 7% 97%;
  --popover-foreground: 260 6% 10%;
  --primary: 258 90% 66%;
  --primary-foreground: 0 0% 100%;
  --secondary: 288 69% 91%;
  --secondary-foreground: 289 52% 14%;
  --muted: 240 7% 94%;
  --muted-foreground: 260 6% 50%;
  --accent: 226 100% 92%;
  --accent-foreground: 232 54% 16%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 260 5% 88%;
  --input: 260 5% 88%;
  --ring: 258 90% 66%;
  --radius: 0.5rem;
}

.dark {
  --background: 270 7% 6%;
  --foreground: 240 7% 97%;
  --card: 260 6% 10%;
  --card-foreground: 240 7% 97%;
  --popover: 260 6% 10%;
  --popover-foreground: 240 7% 97%;
  --primary: 257 100% 74%;
  --primary-foreground: 0 0% 100%;
  --secondary: 288 39% 26%;
  --secondary-foreground: 288 69% 91%;
  --muted: 260 7% 18%;
  --muted-foreground: 256 6% 64%;
  --accent: 230 45% 28%;
  --accent-foreground: 226 100% 92%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 260 7% 18%;
  --input: 260 7% 18%;
  --ring: 257 100% 74%;
  --radius: 0.5rem;
}

How do you export shadcn Violet as design tokens?

Export a W3C DTCG token document for the shadcn Violet 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