Purple

#9E1599

Pink

Color Codes

All color formats for development

HEX
#9E1599
RGB
rgb(158, 21, 153)
HSL
hsl(302, 77%, 35%)
OKLCH
oklch(0.494 0.213 330)
CMYK
cmyk(0%, 87%, 3%, 38%)

Accessibility

WCAG contrast compliance

On White Background

6.95:1

AA AAA

On Black Background

3.02:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF1
100
#FBDF
200
#F7C4
300
#F297
400
#EA61
500
#E534
600
#C71A
700
#9E15
800
#710F
900
#4809
950
#2D06

Shades

Darker variations

1#8E128A
2#7E107B
3#6F0E6B
4#5F0C5C
5#4F0A4D
6#3F083D
7#2F062E
8#20041F
9#10020F

Tints

Lighter variations

1#BB18B6
2#D91CD2
3#E432DE
4#E84FE3
5#EC6CE8
6#F08AEC
7#F4A7F1
8#F7C4F6
9#FBE2FA

Tones

Muted variations

1#971B93
2#90228D
3#892986
4#823080
5#7C3779
6#753E73
7#6E456C
8#674C66
9#605260

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1FD
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFFA
Light backgroundsTable row hoverSkeleton loading
200
F7C4
#F7C4F6
Secondary backgroundsInput backgroundsDividers
300
F297
#F297EE
BordersInactive statesPlaceholder text
400
EA61
#EA61E6
Disabled statesSecondary iconsMuted text
500
E534
#E534DF
Primary brand colorCTAsActive elementsLinks
600
C71A
#C71AC1
Hover statesFocus ringsPrimary buttons hover
700
9E15
#9E1599
Active/pressed statesDark mode accentsSecondary text
800
710F
#710F6E
Text on light backgroundsHeadingsStrong borders
900
4809
#480946
Primary textHigh emphasis contentDark headings
950
2D06
#2D062C
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1FD;
  --purple-100: #FBDFFA;
  --purple-200: #F7C4F6;
  --purple-300: #F297EE;
  --purple-400: #EA61E6;
  --purple-500: #E534DF;
  --purple-600: #C71AC1;
  --purple-700: #9E1599;
  --purple-800: #710F6E;
  --purple-900: #480946;
  --purple-950: #2D062C;
}
Generate More ShadesCreate PaletteConvert Color