Purple

#8703B0

Pink

Color Codes

All color formats for development

HEX

#8703B0

RGB

rgb(135, 3, 176)

HSL

hsl(286, 97%, 35%)

OKLCH

oklch(0.468 0.23 314.5)

CMYK

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

Accessibility

WCAG contrast compliance

On White Background

7.86:1

AA ✓AAA ✓

On Black Background

2.67:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FBF0

100

#F6DC

200

#EFBE

300

#E38B

400

#D44F

500

#C81D

600

#AA03

700

#8703

800

#6102

900

#3E01

950

#2701

Shades

Darker variations

1#7A029E

2#6C028D

3#5F027B

4#510269

5#440158

6#360146

7#290135

8#1B0123

9#0E0012

Tints

Lighter variations

1#A103D0

2#BA04F1

3#C71AFC

4#CF3BFC

5#D75CFD

6#DF7CFD

7#E79DFE

8#EFBEFE

9#F7DEFF

Tones

Muted variations

1#830BA7

2#7E149F

3#7A1D96

4#75258D

5#702E85

6#6C377C

7#673F73

8#62486B

9#5E5162

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FBF0 `#FBF0FF`	BackgroundsSubtle highlightsCard backgrounds
100	F6DC `#F6DCFE`	Light backgroundsTable row hoverSkeleton loading
200	EFBE `#EFBEFE`	Secondary backgroundsInput backgroundsDividers
300	E38B `#E38BFD`	BordersInactive statesPlaceholder text
400	D44F `#D44FFC`	Disabled statesSecondary iconsMuted text
500	C81D `#C81DFC`	Primary brand colorCTAsActive elementsLinks
600	AA03 `#AA03DD`	Hover statesFocus ringsPrimary buttons hover
700	8703 `#8703B0`	Active/pressed statesDark mode accentsSecondary text
800	6102 `#61027E`	Text on light backgroundsHeadingsStrong borders
900	3E01 `#3E0150`	Primary textHigh emphasis contentDark headings
950	2701 `#270132`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF0FF;
  --purple-100: #F6DCFE;
  --purple-200: #EFBEFE;
  --purple-300: #E38BFD;
  --purple-400: #D44FFC;
  --purple-500: #C81DFC;
  --purple-600: #AA03DD;
  --purple-700: #8703B0;
  --purple-800: #61027E;
  --purple-900: #3E0150;
  --purple-950: #270132;
}

Generate More Shades Create Palette Convert Color