Purple

#9D159B

Pink

Color Codes

All color formats for development

HEX
#9D159B
RGB
rgb(157, 21, 155)
HSL
hsl(301, 76%, 35%)
OKLCH
oklch(0.494 0.214 328.9)
CMYK
cmyk(0%, 87%, 1%, 38%)

Accessibility

WCAG contrast compliance

On White Background

6.97:1

AA AAA

On Black Background

3.01: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#8D138B
2#7E117C
3#6E0F6C
4#5E0D5D
5#4F0B4D
6#3F093E
7#2F062E
8#1F041F
9#10020F

Tints

Lighter variations

1#BA19B8
2#D71DD4
3#E333E0
4#E750E5
5#EB6DE9
6#EF8AED
7#F3A7F2
8#F7C5F6
9#FBE2FB

Tones

Muted variations

1#961C94
2#90238E
3#892A87
4#823181
5#7B377A
6#743E73
7#6E456D
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
#F7C5F6
Secondary backgroundsInput backgroundsDividers
300
F198
#F198EF
BordersInactive statesPlaceholder text
400
EA62
#EA62E7
Disabled statesSecondary iconsMuted text
500
E335
#E335E1
Primary brand colorCTAsActive elementsLinks
600
C51B
#C51BC3
Hover statesFocus ringsPrimary buttons hover
700
9D15
#9D159B
Active/pressed statesDark mode accentsSecondary text
800
700F
#700F6F
Text on light backgroundsHeadingsStrong borders
900
480A
#480A47
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: #F7C5F6;
  --purple-300: #F198EF;
  --purple-400: #EA62E7;
  --purple-500: #E335E1;
  --purple-600: #C51BC3;
  --purple-700: #9D159B;
  --purple-800: #700F6F;
  --purple-900: #480A47;
  --purple-950: #2D062C;
}
Generate More ShadesCreate PaletteConvert Color