paletta
Tailwind CSS token

Tailwind Violet 600 in OKLCH

Quick answer: Tailwind Violet 600 is #7C3AED, which converts to oklch(0.541 0.247 293.00). On white, it has a WCAG contrast ratio of 5.70:1 and an APCA score of Lc +77.47.

This meets the WCAG 2.2 AA Normal text threshold (4.5:1) on white. The color shipped in Tailwind CSS v4.0 (January 2025) as part of the OKLCH default palette, which has 92% global browser support (caniuse, April 2026).

oklch(0.541 0.247 293.00)

Specs

oklch(0.541 0.247 293.00)
#7C3AED

Highest contrast: white

5.70:1
Normal AA
Normal AAA
Large AA
Large AAA
Lc +77.47
Try in Studio

Accessibility lens

Protanopia#5F5FC2
Deuteranopia#6368B7
Tritanopia#799F98

How does Tailwind Violet 600 scale from 50 to 950?

Tailwind Violet 600
50 to 950
#F6F0FF
#DACFFF
#C1ACFF
#A987FF
#9262FF
#7C3AED
#651DCA
#4D00A3
#360078
#20004F
#0D002A
  • 50oklch(0.964 0.021 304.04)
  • 100oklch(0.879 0.066 295.50)
  • 200oklch(0.793 0.118 295.21)
  • 300oklch(0.707 0.172 294.66)
  • 400oklch(0.627 0.222 292.97)
  • 500oklch(0.541 0.247 293.01)
  • 600oklch(0.459 0.234 293.14)
  • 700oklch(0.377 0.210 292.73)
  • 800oklch(0.300 0.168 292.14)
  • 900oklch(0.223 0.125 291.00)
  • 950oklch(0.147 0.083 289.90)

How does Tailwind Violet 600 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.77Below AA
Aa3.48Below AA
Aa7.29AAA
Aa13.18AAA
Aa17.92AAA
Aa1.77Below AA
Aa1.00Below AA
Aa1.96Below AA
Aa4.11Below AA
Aa7.43AAA
Aa10.10AAA
Aa3.48Below AA
Aa1.96Below AA
Aa1.00Below AA
Aa2.10Below AA
Aa3.79Below AA
Aa5.15AA
Aa7.29AAA
Aa4.11Below AA
Aa2.10Below AA
Aa1.00Below AA
Aa1.81Below AA
Aa2.46Below AA
Aa13.18AAA
Aa7.43AAA
Aa3.79Below AA
Aa1.81Below AA
Aa1.00Below AA
Aa1.36Below AA
Aa17.92AAA
Aa10.10AAA
Aa5.15AA
Aa2.46Below AA
Aa1.36Below AA
Aa1.00Below AA

Where should you use Tailwind Violet 600 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
#7C3AED
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 Tailwind Violet 600?

@theme {
  --color-primary-50: #efe8fb;
  --color-primary-100: #d3bff4;
  --color-primary-200: #b797ec;
  --color-primary-300: #9c6fe5;
  --color-primary-400: #8148df;
  --color-primary-500: #6826d9;
  --color-primary-600: #561eb5;
  --color-primary-700: #43178e;
  --color-primary-800: #311068;
  --color-primary-900: #1e0941;
  --color-primary-950: #14052b;

  --color-secondary-50: #f7ecf8;
  --color-secondary-100: #e8cbec;
  --color-secondary-200: #d9aae0;
  --color-secondary-300: #ca89d3;
  --color-secondary-400: #bb68c7;
  --color-secondary-500: #ac47bb;
  --color-secondary-600: #8e399b;
  --color-secondary-700: #702d7a;
  --color-secondary-800: #522159;
  --color-secondary-900: #331538;
  --color-secondary-950: #210d24;

  --color-accent-50: #ebedfa;
  --color-accent-100: #c7cdf0;
  --color-accent-200: #a3ace7;
  --color-accent-300: #7f8cdd;
  --color-accent-400: #5b6cd4;
  --color-accent-500: #384cca;
  --color-accent-600: #2c3da8;
  --color-accent-700: #233084;
  --color-accent-800: #192360;
  --color-accent-900: #10163c;
  --color-accent-950: #0a0e27;

  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #efeff1;
  --color-neutral-200: #e0dfe2;
  --color-neutral-300: #c6c4ca;
  --color-neutral-400: #a29ea9;
  --color-neutral-500: #7d7887;
  --color-neutral-600: #5f5b67;
  --color-neutral-700: #46434c;
  --color-neutral-800: #2d2b31;
  --color-neutral-900: #19181b;
  --color-neutral-950: #0f0e10;

  --color-success-50: #e9fcf0;
  --color-success-100: #c1f7d4;
  --color-success-200: #99f1b9;
  --color-success-300: #71ec9e;
  --color-success-400: #49e683;
  --color-success-500: #21e168;
  --color-success-600: #19bb55;
  --color-success-700: #149343;
  --color-success-800: #0e6b31;
  --color-success-900: #09431f;
  --color-success-950: #062c14;

  --color-error-50: #fbe9e9;
  --color-error-100: #f5c2c2;
  --color-error-200: #ef9b9b;
  --color-error-300: #e97474;
  --color-error-400: #e24d4d;
  --color-error-500: #dc2626;
  --color-error-600: #b71e1e;
  --color-error-700: #901717;
  --color-error-800: #691111;
  --color-error-900: #420b0b;
  --color-error-950: #2b0707;

  --color-warning-50: #fef3e6;
  --color-warning-100: #fddeba;
  --color-warning-200: #fcc98e;
  --color-warning-300: #fbb462;
  --color-warning-400: #f99f36;
  --color-warning-500: #f8890a;
  --color-warning-600: #cf7106;
  --color-warning-700: #a35904;
  --color-warning-800: #774103;
  --color-warning-900: #4a2902;
  --color-warning-950: #301b01;

  --color-info-50: #e8eefd;
  --color-info-100: #bed1f9;
  --color-info-200: #95b3f5;
  --color-info-300: #6b95f1;
  --color-info-400: #4277ee;
  --color-info-500: #185aea;
  --color-info-600: #1249c3;
  --color-info-700: #0e3a99;
  --color-info-800: #0a2a70;
  --color-info-900: #061a46;
  --color-info-950: #04112e;

  /* Surfaces */
  --color-background: #F7F7F8;
  --color-surface: #FFFFFF;
  --color-elevated: #F7F7F8;
  --color-foreground: #19181B;
  --color-muted: #7D7887;
  --color-border: #E0DFE2;
}

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