Purple

#96159D

Pink

Color Codes

All color formats for development

HEX
#96159D
RGB
rgb(150, 21, 157)
HSL
hsl(297, 76%, 35%)
OKLCH
oklch(0.484 0.212 325.8)
CMYK
cmyk(4%, 87%, 0%, 38%)

Accessibility

WCAG contrast compliance

On White Background

7.26:1

AA AAA

On Black Background

2.89:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF2
100
#F9E0
200
#F5C5
300
#EC98
400
#E362
500
#DB35
600
#BD1B
700
#9615
800
#6B0F
900
#450A
950
#2B06

Shades

Darker variations

1#87138D
2#78117E
3#690F6E
4#5A0D5E
5#4B0B4F
6#3C093F
7#2D062F
8#1E041F
9#0F0210

Tints

Lighter variations

1#B219BA
2#CE1DD7
3#DA33E3
4#E050E7
5#E56DEB
6#EA8AEF
7#EFA7F3
8#F5C5F7
9#FAE2FB

Tones

Muted variations

1#901C96
2#8A2390
3#842A89
4#7E3182
5#78377B
6#723E74
7#6C456E
8#654C67
9#5F5260

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2FD
BackgroundsSubtle highlightsCard backgrounds
100
F9E0
#F9E0FB
Light backgroundsTable row hoverSkeleton loading
200
F5C5
#F5C5F7
Secondary backgroundsInput backgroundsDividers
300
EC98
#EC98F1
BordersInactive statesPlaceholder text
400
E362
#E362EA
Disabled statesSecondary iconsMuted text
500
DB35
#DB35E3
Primary brand colorCTAsActive elementsLinks
600
BD1B
#BD1BC5
Hover statesFocus ringsPrimary buttons hover
700
9615
#96159D
Active/pressed statesDark mode accentsSecondary text
800
6B0F
#6B0F70
Text on light backgroundsHeadingsStrong borders
900
450A
#450A48
Primary textHigh emphasis contentDark headings
950
2B06
#2B062D
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF2FD;
  --purple-100: #F9E0FB;
  --purple-200: #F5C5F7;
  --purple-300: #EC98F1;
  --purple-400: #E362EA;
  --purple-500: #DB35E3;
  --purple-600: #BD1BC5;
  --purple-700: #96159D;
  --purple-800: #6B0F70;
  --purple-900: #450A48;
  --purple-950: #2B062D;
}
Generate More ShadesCreate PaletteConvert Color