Purple

#8202B1

Purple

Color Codes

All color formats for development

HEX

#8202B1

RGB

rgb(130, 2, 177)

HSL

hsl(284, 98%, 35%)

OKLCH

oklch(0.462 0.23 312.3)

CMYK

cmyk(27%, 99%, 0%, 31%)

Accessibility

WCAG contrast compliance

On White Background

8.10:1

AA ✓AAA ✓

On Black Background

2.59:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FBF0

100

#F5DC

200

#EDBD

300

#DF8B

400

#CF4E

500

#C11C

600

#A402

700

#8202

800

#5D01

900

#3B01

950

#2501

Shades

Darker variations

1#75029F

2#68018D

3#5B017C

4#4E016A

5#410158

6#340147

7#270135

8#1A0023

9#0D0012

Tints

Lighter variations

1#9A02D2

2#B202F2

3#C019FD

4#C93AFD

5#D25BFD

6#DB7CFE

7#E49DFE

8#EDBDFE

9#F6DEFF

Tones

Muted variations

1#7E0BA8

2#7A139F

3#761C96

4#72258E

5#6E2E85

6#6A367C

7#653F73

8#61486B

9#5D5162

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FBF0 `#FBF0FF`	BackgroundsSubtle highlightsCard backgrounds
100	F5DC `#F5DCFF`	Light backgroundsTable row hoverSkeleton loading
200	EDBD `#EDBDFE`	Secondary backgroundsInput backgroundsDividers
300	DF8B `#DF8BFE`	BordersInactive statesPlaceholder text
400	CF4E `#CF4EFD`	Disabled statesSecondary iconsMuted text
500	C11C `#C11CFD`	Primary brand colorCTAsActive elementsLinks
600	A402 `#A402DE`	Hover statesFocus ringsPrimary buttons hover
700	8202 `#8202B1`	Active/pressed statesDark mode accentsSecondary text
800	5D01 `#5D017E`	Text on light backgroundsHeadingsStrong borders
900	3B01 `#3B0151`	Primary textHigh emphasis contentDark headings
950	2501 `#250132`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF0FF;
  --purple-100: #F5DCFF;
  --purple-200: #EDBDFE;
  --purple-300: #DF8BFE;
  --purple-400: #CF4EFD;
  --purple-500: #C11CFD;
  --purple-600: #A402DE;
  --purple-700: #8202B1;
  --purple-800: #5D017E;
  --purple-900: #3B0151;
  --purple-950: #250132;
}

Generate More Shades Create Palette Convert Color