Purple

#8E05AD

Pink

Color Codes

All color formats for development

HEX
#8E05AD
RGB
rgb(142, 5, 173)
HSL
hsl(289, 94%, 35%)
OKLCH
oklch(0.477 0.229 317.9)
CMYK
cmyk(18%, 97%, 0%, 32%)

Accessibility

WCAG contrast compliance

On White Background

7.57:1

AA AAA

On Black Background

2.78:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FCF0
100
#F8DC
200
#F2BF
300
#E78D
400
#DB52
500
#D120
600
#B307
700
#8E05
800
#6604
900
#4102
950
#2902

Shades

Darker variations

1#80059C
2#72048B
3#640479
4#550368
5#470357
6#390245
7#2B0234
8#1C0123
9#0E0111

Tints

Lighter variations

1#A906CD
2#C307ED
3#D01EF8
4#D73EF9
5#DD5EFA
6#E47EFB
7#EB9FFC
8#F2BFFD
9#F8DFFE

Tones

Muted variations

1#890EA5
2#84169C
3#7E1F94
4#79278C
5#742F83
6#6F387B
7#694072
8#64486A
9#5F5162

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FCF0
#FCF0FF
BackgroundsSubtle highlightsCard backgrounds
100
F8DC
#F8DCFE
Light backgroundsTable row hoverSkeleton loading
200
F2BF
#F2BFFD
Secondary backgroundsInput backgroundsDividers
300
E78D
#E78DFB
BordersInactive statesPlaceholder text
400
DB52
#DB52FA
Disabled statesSecondary iconsMuted text
500
D120
#D120F8
Primary brand colorCTAsActive elementsLinks
600
B307
#B307DA
Hover statesFocus ringsPrimary buttons hover
700
8E05
#8E05AD
Active/pressed statesDark mode accentsSecondary text
800
6604
#66047C
Text on light backgroundsHeadingsStrong borders
900
4102
#41024F
Primary textHigh emphasis contentDark headings
950
2902
#290231
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FCF0FF;
  --purple-100: #F8DCFE;
  --purple-200: #F2BFFD;
  --purple-300: #E78DFB;
  --purple-400: #DB52FA;
  --purple-500: #D120F8;
  --purple-600: #B307DA;
  --purple-700: #8E05AD;
  --purple-800: #66047C;
  --purple-900: #41024F;
  --purple-950: #290231;
}
Generate More ShadesCreate PaletteConvert Color