Purple

#9D1582

Pink

Color Codes

All color formats for development

HEX
#9D1582
RGB
rgb(157, 21, 130)
HSL
hsl(312, 76%, 35%)
OKLCH
oklch(0.48 0.197 338.4)
CMYK
cmyk(0%, 87%, 17%, 38%)

Accessibility

WCAG contrast compliance

On White Background

7.33:1

AA AAA

On Black Background

2.86: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#8D1375
2#7E1168
3#6E0F5B
4#5E0D4E
5#4F0B41
6#3F0934
7#2F0627
8#1F041A
9#10020D

Tints

Lighter variations

1#BA199A
2#D71DB2
3#E333C0
4#E750C9
5#EB6DD2
6#EF8ADB
7#F3A7E4
8#F7C5ED
9#FBE2F6

Tones

Muted variations

1#961C7E
2#90237A
3#892A76
4#823172
5#7B376E
6#743E6A
7#6E4565
8#674C61
9#60525D

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2FB
BackgroundsSubtle highlightsCard backgrounds
100
FBE0
#FBE0F5
Light backgroundsTable row hoverSkeleton loading
200
F7C5
#F7C5ED
Secondary backgroundsInput backgroundsDividers
300
F198
#F198DF
BordersInactive statesPlaceholder text
400
EA62
#EA62CE
Disabled statesSecondary iconsMuted text
500
E335
#E335C1
Primary brand colorCTAsActive elementsLinks
600
C51B
#C51BA3
Hover statesFocus ringsPrimary buttons hover
700
9D15
#9D1582
Active/pressed statesDark mode accentsSecondary text
800
700F
#700F5D
Text on light backgroundsHeadingsStrong borders
900
480A
#480A3B
Primary textHigh emphasis contentDark headings
950
2D06
#2D0625
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF2FB;
  --purple-100: #FBE0F5;
  --purple-200: #F7C5ED;
  --purple-300: #F198DF;
  --purple-400: #EA62CE;
  --purple-500: #E335C1;
  --purple-600: #C51BA3;
  --purple-700: #9D1582;
  --purple-800: #700F5D;
  --purple-900: #480A3B;
  --purple-950: #2D0625;
}
Generate More ShadesCreate PaletteConvert Color