What is Tailwind Violet 600 in OKLCH?

Tailwind Violet 600 (#7C3AED) is oklch(0.541 0.247 293) in the OKLCH color space.

Is Tailwind Violet 600 WCAG 2.2 AA accessible?

Tailwind Violet 600 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 5.7:1 on white, 3.69:1 on black.

What is the APCA Lc for Tailwind Violet 600?

On white, Tailwind Violet 600 has an APCA Lc of 77.5. On black, Lc is -24.3. APCA is a perceptual contrast model, not a WCAG compliance standard.

How do I use Tailwind Violet 600 in Tailwind?

Paste the snippet above into your tailwind.config (or globals.css with @theme).

How does Tailwind Violet 600 look to people with color vision differences?

Under deuteranopia (most common, around 5 percent of men), Tailwind Violet 600 simulates to #6368b7. Under protanopia it shifts to #5f5fc2. Under tritanopia it appears as #799f98. Always pair color with shape, label, or icon for accessibility.

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)

Tailwind Violet 600 is a Tailwind utility color. This page frames #7C3AED as a utility stop: copy the generated @theme scale below, or map it into your own tokens.

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

Base#7C3AED
300#A987FF
500#7C3AED
700#4D00A3

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

How does Tailwind Violet 600 go from primitive to component?

Primitive
Semantic
Component

Primitive

The raw value, before it means anything.

hex: #7C3AED
oklch: oklch(0.541 0.247 293.00)

Semantic

Bound to a role token that UI reads by name.

--primary: #7C3AED

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.

AA5.70:1

DefaultSave paletteNew

HoverSave paletteNew

ActiveSave paletteNew

DisabledSave paletteNew

On-color text: white (5.70:1 on #7C3AED).

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

Does Tailwind Violet 600 pass WCAG 2.2 on common neutral backgrounds?

Aa5.70AA
White #FFFFFF
Aa5.23AA
Neutral 100 #F5F5F5
Aa4.52AA
Neutral 200 #E5E5E5
Aa2.26Below AA
Neutral 400 #A3A3A3
Aa1.37Below AA
Neutral 600 #525252
Aa3.15Below AA
Neutral 900 #171717
Aa3.69Below AA
Black #000000

What palettes pair with Tailwind Violet 600?

Analogous

#3A8DED
#3A43ED
#7C3AED
#C73AED
#ED3AC9

Complementary

#AB80F3
#7C3AED

Triadic

#7C3AED
#4F11BA
#ED7C3A

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

Notes on Tailwind Violet 600

Violet 600 is the loudest color in this set, oklch(0.541 0.247 293) with chroma up at 0.247, so it works as an attention primary, a premium accent, or a gradient endpoint. As text or a filled button on white it meets WCAG 2.2 AA (5.7:1, APCA Lc +77.47); on a near-black surface it settles to AA Large (3.69:1), so size up any dark-mode usage. Its analogous neighbors run electric, from a blue #3A43ED to a magenta #ED3AC9, which makes a natural gradient, and the triad balances it with a warm orange #ED7C3A. Keep the chrome on neutral slate so the violet stays the event. Under the accessibility lens the red channel weakens: protanopia and deuteranopia both pull it toward blue (#6368B7), so a violet-versus-blue distinction can vanish, and tritanopia mutes it to a soft green (#799F98). Lean on shape and position, not the exact hue, when it signals state.

What other Tailwind and shadcn colors relate to Tailwind Violet 600?

Nearest hues across families

Browse all colors

@theme {
  --color-primary-50: #f6f0ff;
  --color-primary-100: #dacfff;
  --color-primary-200: #c1acff;
  --color-primary-300: #a987ff;
  --color-primary-400: #9262ff;
  --color-primary-500: #7c3aed;
  --color-primary-600: #651dca;
  --color-primary-700: #4d00a3;
  --color-primary-800: #360078;
  --color-primary-900: #20004f;
  --color-primary-950: #0d002a;

  --color-secondary-50: #ffeeff;
  --color-secondary-100: #f2d3f6;
  --color-secondary-200: #e6b5ed;
  --color-secondary-300: #d998e3;
  --color-secondary-400: #ca7cd5;
  --color-secondary-500: #b862c5;
  --color-secondary-600: #9646a2;
  --color-secondary-700: #732e7d;
  --color-secondary-800: #501a58;
  --color-secondary-900: #300736;
  --color-secondary-950: #120016;

  --color-accent-50: #edf4ff;
  --color-accent-100: #cdd8ff;
  --color-accent-200: #abbbfa;
  --color-accent-300: #8b9ff3;
  --color-accent-400: #6e82e5;
  --color-accent-500: #5566d2;
  --color-accent-600: #404db1;
  --color-accent-700: #2e378d;
  --color-accent-800: #1d2366;
  --color-accent-900: #0e1142;
  --color-accent-950: #030321;

  --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: #e6fce9;
  --color-success-100: #c4eaca;
  --color-success-200: #9ddaa7;
  --color-success-300: #74c985;
  --color-success-400: #4ab766;
  --color-success-500: #16a34a;
  --color-success-600: #008330;
  --color-success-700: #00631a;
  --color-success-800: #00440a;
  --color-success-900: #002700;
  --color-success-950: #000d00;

  --color-error-50: #ffebe6;
  --color-error-100: #ffc9c0;
  --color-error-200: #ffa398;
  --color-error-300: #fe7c6f;
  --color-error-400: #f0544a;
  --color-error-500: #dc2626;
  --color-error-600: #b8000a;
  --color-error-700: #910000;
  --color-error-800: #680000;
  --color-error-900: #420000;
  --color-error-950: #200000;

  --color-warning-50: #fff1e1;
  --color-warning-100: #fed9be;
  --color-warning-200: #f9c095;
  --color-warning-300: #f2a66a;
  --color-warning-400: #e78e40;
  --color-warning-500: #d97706;
  --color-warning-600: #b25800;
  --color-warning-700: #893d00;
  --color-warning-800: #612500;
  --color-warning-900: #3a0f00;
  --color-warning-950: #180000;

  --color-info-50: #e6f6ff;
  --color-info-100: #bfdaff;
  --color-info-200: #95bdff;
  --color-info-300: #6ca0ff;
  --color-info-400: #4782fd;
  --color-info-500: #2563eb;
  --color-info-600: #114ac8;
  --color-info-700: #0333a1;
  --color-info-800: #002076;
  --color-info-900: #000e4e;
  --color-info-950: #000129;

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

How do you export Tailwind Violet 600 as design tokens?

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

Tailwind Violet 600 in OKLCH

Accessibility lens

How does Tailwind Violet 600 go from primitive to component?

How does Tailwind Violet 600 scale from 50 to 950?

How does Tailwind Violet 600 score on WCAG 2.2 contrast?

Does Tailwind Violet 600 pass WCAG 2.2 on common neutral backgrounds?

What palettes pair with Tailwind Violet 600?

Analogous

Complementary

Triadic

Where should you use Tailwind Violet 600 in production UI?

Notes on Tailwind Violet 600

What other Tailwind and shadcn colors relate to Tailwind Violet 600?

Nearest hues across families

shadcn Violet in OKLCH

shadcn Zinc Dark in OKLCH

shadcn Indigo Custom in OKLCH

Tailwind Blue 700 in OKLCH

How do you export Tailwind Violet 600 as design tokens?

Frequently asked questions

Ready to build your color system?