Purple

#8816CA

Purple

Color Codes

All color formats for development

HEX

#8816CA

RGB

rgb(136, 22, 202)

HSL

hsl(278, 80%, 44%)

OKLCH

oklch(0.498 0.243 307.3)

CMYK

cmyk(33%, 89%, 0%, 21%)

Accessibility

WCAG contrast compliance

On White Background

6.97:1

AA ✓AAA ✗

On Black Background

3.01:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F9F1

100

#F1DF

200

#E5C3

300

#D195

400

#B95E

500

#A530

600

#8816

700

#6C12

800

#4D0D

900

#3208

950

#1F05

Shades

Darker variations

1#7B14B6

2#6D12A2

3#5F108D

4#520D79

5#440B65

6#360951

7#29073D

8#1B0428

9#0E0214

Tints

Lighter variations

1#9919E4

2#A531E8

3#B04BEB

4#BC65EE

5#C77EF1

6#D298F4

7#DDB2F6

8#E9CCF9

9#F4E5FC

Tones

Muted variations

1#861FC1

2#8328B8

3#8131AF

4#7F3AA6

5#7C439D

6#7A4C94

7#77558B

8#755E82

9#736779

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F9F1 `#F9F1FD`	BackgroundsSubtle highlightsCard backgrounds
100	F1DF `#F1DFFB`	Light backgroundsTable row hoverSkeleton loading
200	E5C3 `#E5C3F8`	Secondary backgroundsInput backgroundsDividers
300	D195 `#D195F3`	BordersInactive statesPlaceholder text
400	B95E `#B95EED`	Disabled statesSecondary iconsMuted text
500	A530 `#A530E8`	Primary brand colorCTAsActive elementsLinks
600	8816 `#8816CA`	Hover statesFocus ringsPrimary buttons hover
700	6C12 `#6C12A1`	Active/pressed statesDark mode accentsSecondary text
800	4D0D `#4D0D73`	Text on light backgroundsHeadingsStrong borders
900	3208 `#320849`	Primary textHigh emphasis contentDark headings
950	1F05 `#1F052E`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F9F1FD;
  --purple-100: #F1DFFB;
  --purple-200: #E5C3F8;
  --purple-300: #D195F3;
  --purple-400: #B95EED;
  --purple-500: #A530E8;
  --purple-600: #8816CA;
  --purple-700: #6C12A1;
  --purple-800: #4D0D73;
  --purple-900: #320849;
  --purple-950: #1F052E;
}

Generate More Shades Create Palette Convert Color