Purple

#9D1599

Pink

Color Codes

All color formats for development

HEX
#9D1599
RGB
rgb(157, 21, 153)
HSL
hsl(302, 76%, 35%)
OKLCH
oklch(0.493 0.212 329.6)
CMYK
cmyk(0%, 87%, 3%, 38%)

Accessibility

WCAG contrast compliance

On White Background

7.00:1

AA AAA

On Black Background

3.00:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF2
100
#FBE0
200
#F7C5
300
#F198
400
#EA62
500
#E335
600
#C51B
700
#9D15
800
#700F
900
#480A
950
#2D06

Shades

Darker variations

1#8D1389
2#7E117A
3#6E0F6B
4#5E0D5C
5#4F0B4C
6#3F093D
7#2F062E
8#1F041F
9#10020F

Tints

Lighter variations

1#BA19B5
2#D71DD1
3#E333DD
4#E750E2
5#EB6DE7
6#EF8AEC
7#F3A7F1
8#F7C5F5
9#FBE2FA

Tones

Muted variations

1#961C92
2#90238C
3#892A86
4#82317F
5#7B3779
6#743E73
7#6E456C
8#674C66
9#605260

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2FD
BackgroundsSubtle highlightsCard backgrounds
100
FBE0
#FBE0FA
Light backgroundsTable row hoverSkeleton loading
200
F7C5
#F7C5F5
Secondary backgroundsInput backgroundsDividers
300
F198
#F198EE
BordersInactive statesPlaceholder text
400
EA62
#EA62E5
Disabled statesSecondary iconsMuted text
500
E335
#E335DE
Primary brand colorCTAsActive elementsLinks
600
C51B
#C51BC0
Hover statesFocus ringsPrimary buttons hover
700
9D15
#9D1599
Active/pressed statesDark mode accentsSecondary text
800
700F
#700F6D
Text on light backgroundsHeadingsStrong borders
900
480A
#480A46
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: #FDF2FD;
  --purple-100: #FBE0FA;
  --purple-200: #F7C5F5;
  --purple-300: #F198EE;
  --purple-400: #EA62E5;
  --purple-500: #E335DE;
  --purple-600: #C51BC0;
  --purple-700: #9D1599;
  --purple-800: #700F6D;
  --purple-900: #480A46;
  --purple-950: #2D062C;
}
Generate More ShadesCreate PaletteConvert Color