Purple

#77085D

Pink

Color Codes

All color formats for development

HEX
#77085D
RGB
rgb(119, 8, 93)
HSL
hsl(314, 87%, 25%)
OKLCH
oklch(0.387 0.161 341)
CMYK
cmyk(0%, 93%, 22%, 53%)

Accessibility

WCAG contrast compliance

On White Background

10.62:1

AA AAA

On Black Background

1.98:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF1
100
#FDDE
200
#FBC1
300
#F791
400
#F358
500
#F028
600
#D20F
700
#A70C
800
#7708
900
#4C05
950
#3003

Shades

Darker variations

1#6B0754
2#5F074B
3#530641
4#480538
5#3C042F
6#300325
7#24021C
8#180213
9#0C0109

Tints

Lighter variations

1#9B0B79
2#BF0D95
3#E310B1
4#F028C1
5#F34CCC
6#F570D6
7#F894E0
8#FAB7EA
9#FDDBF5

Tones

Muted variations

1#720E5A
2#6C1357
3#671954
4#611E51
5#5B244F
6#562A4C
7#502F49
8#4B3546
9#453A43

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1FB
BackgroundsSubtle highlightsCard backgrounds
100
FDDE
#FDDEF5
Light backgroundsTable row hoverSkeleton loading
200
FBC1
#FBC1ED
Secondary backgroundsInput backgroundsDividers
300
F791
#F791E0
BordersInactive statesPlaceholder text
400
F358
#F358CF
Disabled statesSecondary iconsMuted text
500
F028
#F028C1
Primary brand colorCTAsActive elementsLinks
600
D20F
#D20FA4
Hover statesFocus ringsPrimary buttons hover
700
A70C
#A70C83
Active/pressed statesDark mode accentsSecondary text
800
7708
#77085D
Text on light backgroundsHeadingsStrong borders
900
4C05
#4C053C
Primary textHigh emphasis contentDark headings
950
3003
#300325
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1FB;
  --purple-100: #FDDEF5;
  --purple-200: #FBC1ED;
  --purple-300: #F791E0;
  --purple-400: #F358CF;
  --purple-500: #F028C1;
  --purple-600: #D20FA4;
  --purple-700: #A70C83;
  --purple-800: #77085D;
  --purple-900: #4C053C;
  --purple-950: #300325;
}
Generate More ShadesCreate PaletteConvert Color