Purple

#8006AC

Purple

Color Codes

All color formats for development

HEX

#8006AC

RGB

rgb(128, 6, 172)

HSL

hsl(284, 93%, 35%)

OKLCH

oklch(0.456 0.224 312.9)

CMYK

cmyk(26%, 97%, 0%, 33%)

Accessibility

WCAG contrast compliance

On White Background

8.27:1

AA ✓AAA ✓

On Black Background

2.54:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FBF0

100

#F5DD

200

#ECBF

300

#DE8E

400

#CC53

500

#BE22

600

#A108

700

#8006

800

#5B04

900

#3B03

950

#2502

Shades

Darker variations

1#73069B

2#66058A

3#5A0479

4#4D0467

5#400356

6#330245

7#260234

8#1A0122

9#0D0111

Tints

Lighter variations

1#9807CC

2#B009EC

3#BD1FF7

4#C73FF8

5#D05FF9

6#D97FFA

7#E39FFC

8#ECBFFD

9#F6DFFE

Tones

Muted variations

1#7C0FA4

2#78179C

3#741F93

4#70278B

5#6D3083

6#69387A

7#654072

8#61496A

9#5D5162

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FBF0 `#FBF0FE`	BackgroundsSubtle highlightsCard backgrounds
100	F5DD `#F5DDFE`	Light backgroundsTable row hoverSkeleton loading
200	ECBF `#ECBFFD`	Secondary backgroundsInput backgroundsDividers
300	DE8E `#DE8EFB`	BordersInactive statesPlaceholder text
400	CC53 `#CC53F9`	Disabled statesSecondary iconsMuted text
500	BE22 `#BE22F7`	Primary brand colorCTAsActive elementsLinks
600	A108 `#A108D9`	Hover statesFocus ringsPrimary buttons hover
700	8006 `#8006AC`	Active/pressed statesDark mode accentsSecondary text
800	5B04 `#5B047B`	Text on light backgroundsHeadingsStrong borders
900	3B03 `#3B034F`	Primary textHigh emphasis contentDark headings
950	2502 `#250231`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF0FE;
  --purple-100: #F5DDFE;
  --purple-200: #ECBFFD;
  --purple-300: #DE8EFB;
  --purple-400: #CC53F9;
  --purple-500: #BE22F7;
  --purple-600: #A108D9;
  --purple-700: #8006AC;
  --purple-800: #5B047B;
  --purple-900: #3B034F;
  --purple-950: #250231;
}

Generate More Shades Create Palette Convert Color