Purple

#8203B0

Purple

Color Codes

All color formats for development

HEX

#8203B0

RGB

rgb(130, 3, 176)

HSL

hsl(284, 97%, 35%)

OKLCH

oklch(0.461 0.228 312.6)

CMYK

cmyk(26%, 98%, 0%, 31%)

Accessibility

WCAG contrast compliance

On White Background

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

#EDBE

300

#DF8B

400

#CE4F

500

#C01D

600

#A303

700

#8203

800

#5D02

900

#3B01

950

#2501

Shades

Darker variations

1#75029E

2#68028D

3#5B027B

4#4E0269

5#410158

6#340146

7#270135

8#1A0123

9#0D0012

Tints

Lighter variations

1#9A03D0

2#B204F1

3#BF1AFC

4#C93BFC

5#D25CFD

6#DB7CFD

7#E49DFE

8#EDBEFE

9#F6DEFF

Tones

Muted variations

1#7E0BA7

2#7A149F

3#761D96

4#71258D

5#6D2E85

6#69377C

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 `#F5DCFE`	Light backgroundsTable row hoverSkeleton loading
200	EDBE `#EDBEFE`	Secondary backgroundsInput backgroundsDividers
300	DF8B `#DF8BFD`	BordersInactive statesPlaceholder text
400	CE4F `#CE4FFC`	Disabled statesSecondary iconsMuted text
500	C01D `#C01DFC`	Primary brand colorCTAsActive elementsLinks
600	A303 `#A303DD`	Hover statesFocus ringsPrimary buttons hover
700	8203 `#8203B0`	Active/pressed statesDark mode accentsSecondary text
800	5D02 `#5D027E`	Text on light backgroundsHeadingsStrong borders
900	3B01 `#3B0150`	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: #F5DCFE;
  --purple-200: #EDBEFE;
  --purple-300: #DF8BFD;
  --purple-400: #CE4FFC;
  --purple-500: #C01DFC;
  --purple-600: #A303DD;
  --purple-700: #8203B0;
  --purple-800: #5D027E;
  --purple-900: #3B0150;
  --purple-950: #250132;
}

Generate More Shades Create Palette Convert Color