Purple

#9D0BA8

Pink

Color Codes

All color formats for development

HEX
#9D0BA8
RGB
rgb(157, 11, 168)
HSL
hsl(296, 88%, 35%)
OKLCH
oklch(0.499 0.228 324.7)
CMYK
cmyk(7%, 93%, 0%, 34%)

Accessibility

WCAG contrast compliance

On White Background

6.89:1

AA AAA

On Black Background

3.05:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF1
100
#FBDD
200
#F7C1
300
#F191
400
#EA57
500
#E427
600
#C60D
700
#9D0B
800
#7008
900
#4805
950
#2D03

Shades

Darker variations

1#8E0A97
2#7E0986
3#6E0775
4#5E0665
5#4F0554
6#3F0443
7#2F0332
8#1F0222
9#100111

Tints

Lighter variations

1#BB0DC7
2#D80FE6
3#E325F1
4#E744F3
5#EB63F5
6#EF82F7
7#F3A2F9
8#F7C1FB
9#FBE0FD

Tones

Muted variations

1#9713A0
2#901A98
3#892290
4#822A88
5#7B3281
6#743A79
7#6E4271
8#674A69
9#605161

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1FE
BackgroundsSubtle highlightsCard backgrounds
100
FBDD
#FBDDFD
Light backgroundsTable row hoverSkeleton loading
200
F7C1
#F7C1FB
Secondary backgroundsInput backgroundsDividers
300
F191
#F191F8
BordersInactive statesPlaceholder text
400
EA57
#EA57F4
Disabled statesSecondary iconsMuted text
500
E427
#E427F1
Primary brand colorCTAsActive elementsLinks
600
C60D
#C60DD3
Hover statesFocus ringsPrimary buttons hover
700
9D0B
#9D0BA8
Active/pressed statesDark mode accentsSecondary text
800
7008
#700878
Text on light backgroundsHeadingsStrong borders
900
4805
#48054D
Primary textHigh emphasis contentDark headings
950
2D03
#2D0330
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1FE;
  --purple-100: #FBDDFD;
  --purple-200: #F7C1FB;
  --purple-300: #F191F8;
  --purple-400: #EA57F4;
  --purple-500: #E427F1;
  --purple-600: #C60DD3;
  --purple-700: #9D0BA8;
  --purple-800: #700878;
  --purple-900: #48054D;
  --purple-950: #2D0330;
}
Generate More ShadesCreate PaletteConvert Color