Purple

#9406DB

Purple

Color Codes

All color formats for development

HEX

#9406DB

RGB

rgb(148, 6, 219)

HSL

hsl(280, 95%, 44%)

OKLCH

oklch(0.523 0.265 307.8)

CMYK

cmyk(32%, 97%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

6.35:1

AA ✓AAA ✗

On Black Background

3.31:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FAF0

100

#F3DC

200

#E8BE

300

#D78D

400

#C251

500

#B11F

600

#9406

700

#7604

800

#5403

900

#3602

950

#2201

Shades

Darker variations

1#8505C5

2#7604AF

3#670499

4#590383

5#4A036D

6#3B0258

7#2C0242

8#1E012C

9#0F0116

Tints

Lighter variations

1#A706F7

2#B120F9

3#BB3CFA

4#C458FB

5#CE74FB

6#D890FC

7#E2ABFD

8#EBC7FE

9#F5E3FE

Tones

Muted variations

1#9010D0

2#8D1BC5

3#8926BB

4#8630B0

5#823BA5

6#7E469B

7#7B5090

8#775B86

9#74667B

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FAF0 `#FAF0FF`	BackgroundsSubtle highlightsCard backgrounds
100	F3DC `#F3DCFE`	Light backgroundsTable row hoverSkeleton loading
200	E8BE `#E8BEFD`	Secondary backgroundsInput backgroundsDividers
300	D78D `#D78DFC`	BordersInactive statesPlaceholder text
400	C251 `#C251FB`	Disabled statesSecondary iconsMuted text
500	B11F `#B11FF9`	Primary brand colorCTAsActive elementsLinks
600	9406 `#9406DB`	Hover statesFocus ringsPrimary buttons hover
700	7604 `#7604AE`	Active/pressed statesDark mode accentsSecondary text
800	5403 `#54037C`	Text on light backgroundsHeadingsStrong borders
900	3602 `#360250`	Primary textHigh emphasis contentDark headings
950	2201 `#220132`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FAF0FF;
  --purple-100: #F3DCFE;
  --purple-200: #E8BEFD;
  --purple-300: #D78DFC;
  --purple-400: #C251FB;
  --purple-500: #B11FF9;
  --purple-600: #9406DB;
  --purple-700: #7604AE;
  --purple-800: #54037C;
  --purple-900: #360250;
  --purple-950: #220132;
}

Generate More Shades Create Palette Convert Color