Purple

#9D13A0

Pink

Color Codes

All color formats for development

HEX
#9D13A0
RGB
rgb(157, 19, 160)
HSL
hsl(299, 79%, 35%)
OKLCH
oklch(0.496 0.219 327.2)
CMYK
cmyk(2%, 88%, 0%, 37%)

Accessibility

WCAG contrast compliance

On White Background

6.92:1

AA AAA

On Black Background

3.03:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF1
100
#FBDF
200
#F7C4
300
#F196
400
#EA5F
500
#E432
600
#C618
700
#9D13
800
#700D
900
#4809
950
#2D05

Shades

Darker variations

1#8E1190
2#7E0F80
3#6E0D70
4#5E0B60
5#4F0950
6#3F0740
7#2F0630
8#1F0420
9#100210

Tints

Lighter variations

1#BB16BD
2#D81ADB
3#E42FE7
4#E74DEA
5#EB6BEE
6#EF88F1
7#F3A6F5
8#F7C4F8
9#FBE1FC

Tones

Muted variations

1#971A99
2#902192
3#89288B
4#822F84
5#7B367D
6#753D75
7#6E446E
8#674B67
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
#F7C4F8
Secondary backgroundsInput backgroundsDividers
300
F196
#F196F3
BordersInactive statesPlaceholder text
400
EA5F
#EA5FEC
Disabled statesSecondary iconsMuted text
500
E432
#E432E7
Primary brand colorCTAsActive elementsLinks
600
C618
#C618C9
Hover statesFocus ringsPrimary buttons hover
700
9D13
#9D13A0
Active/pressed statesDark mode accentsSecondary text
800
700D
#700D72
Text on light backgroundsHeadingsStrong borders
900
4809
#480949
Primary textHigh emphasis contentDark headings
950
2D05
#2D052E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1FD;
  --purple-100: #FBDFFB;
  --purple-200: #F7C4F8;
  --purple-300: #F196F3;
  --purple-400: #EA5FEC;
  --purple-500: #E432E7;
  --purple-600: #C618C9;
  --purple-700: #9D13A0;
  --purple-800: #700D72;
  --purple-900: #480949;
  --purple-950: #2D052E;
}
Generate More ShadesCreate PaletteConvert Color