Purple

#9E159E

Pink

Color Codes

All color formats for development

HEX
#9E159E
RGB
rgb(158, 21, 158)
HSL
hsl(300, 77%, 35%)
OKLCH
oklch(0.497 0.216 328.2)
CMYK
cmyk(0%, 87%, 0%, 38%)

Accessibility

WCAG contrast compliance

On White Background

6.87:1

AA AAA

On Black Background

3.05: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#8E128E
2#7E107E
3#6F0E6F
4#5F0C5F
5#4F0A4F
6#3F083F
7#2F062F
8#200420
9#100210

Tints

Lighter variations

1#BB18BB
2#D91CD9
3#E432E4
4#E84FE8
5#EC6CEC
6#F08AF0
7#F4A7F4
8#F7C4F7
9#FBE2FB

Tones

Muted variations

1#971B97
2#902290
3#892989
4#823082
5#7C377C
6#753E75
7#6E456E
8#674C67
9#605260

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1FD
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFFB
Light backgroundsTable row hoverSkeleton loading
200
F7C4
#F7C4F7
Secondary backgroundsInput backgroundsDividers
300
F297
#F297F2
BordersInactive statesPlaceholder text
400
EA61
#EA61EA
Disabled statesSecondary iconsMuted text
500
E534
#E534E5
Primary brand colorCTAsActive elementsLinks
600
C71A
#C71AC7
Hover statesFocus ringsPrimary buttons hover
700
9E15
#9E159E
Active/pressed statesDark mode accentsSecondary text
800
710F
#710F71
Text on light backgroundsHeadingsStrong borders
900
4809
#480948
Primary textHigh emphasis contentDark headings
950
2D06
#2D062D
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1FD;
  --purple-100: #FBDFFB;
  --purple-200: #F7C4F7;
  --purple-300: #F297F2;
  --purple-400: #EA61EA;
  --purple-500: #E534E5;
  --purple-600: #C71AC7;
  --purple-700: #9E159E;
  --purple-800: #710F71;
  --purple-900: #480948;
  --purple-950: #2D062D;
}
Generate More ShadesCreate PaletteConvert Color