Purple

#9404DC

Purple

Color Codes

All color formats for development

HEX

#9404DC

RGB

rgb(148, 4, 220)

HSL

hsl(280, 96%, 44%)

OKLCH

oklch(0.523 0.266 307.6)

CMYK

cmyk(33%, 98%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

6.34: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

#D78C

400

#C250

500

#B11E

600

#9404

700

#7604

800

#5403

900

#3602

950

#2201

Shades

Darker variations

1#8504C6

2#7604B0

3#68039A

4#590384

5#4A026E

6#3B0258

7#2C0142

8#1E012C

9#0F0016

Tints

Lighter variations

1#A705F8

2#B11FFA

3#BB3BFB

4#C557FC

5#CE73FC

6#D88FFD

7#E2ABFD

8#ECC7FE

9#F5E3FE

Tones

Muted variations

1#910FD1

2#8D1AC6

3#8925BC

4#8630B1

5#823AA6

6#7F459B

7#7B5091

8#775B86

9#74657B

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 `#E8BEFE`	Secondary backgroundsInput backgroundsDividers
300	D78C `#D78CFD`	BordersInactive statesPlaceholder text
400	C250 `#C250FB`	Disabled statesSecondary iconsMuted text
500	B11E `#B11EFA`	Primary brand colorCTAsActive elementsLinks
600	9404 `#9404DC`	Hover statesFocus ringsPrimary buttons hover
700	7604 `#7604AF`	Active/pressed statesDark mode accentsSecondary text
800	5403 `#54037D`	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: #E8BEFE;
  --purple-300: #D78CFD;
  --purple-400: #C250FB;
  --purple-500: #B11EFA;
  --purple-600: #9404DC;
  --purple-700: #7604AF;
  --purple-800: #54037D;
  --purple-900: #360250;
  --purple-950: #220132;
}

Generate More Shades Create Palette Convert Color