Purple

#AC0691

Pink

Color Codes

All color formats for development

HEX
#AC0691
RGB
rgb(172, 6, 145)
HSL
hsl(310, 93%, 35%)
OKLCH
oklch(0.508 0.221 337.4)
CMYK
cmyk(0%, 97%, 16%, 33%)

Accessibility

WCAG contrast compliance

On White Background

6.59:1

AA AAA

On Black Background

3.19:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF0
100
#FEDD
200
#FDBF
300
#FB8E
400
#F953
500
#F722
600
#D908
700
#AC06
800
#7B04
900
#4F03
950
#3102

Shades

Darker variations

1#9B0682
2#8A0574
3#790465
4#670457
5#560348
6#45023A
7#34022B
8#22011D
9#11010E

Tints

Lighter variations

1#CC07AB
2#EC09C6
3#F71FD3
4#F83FD9
5#F95FE0
6#FA7FE6
7#FC9FEC
8#FDBFF2
9#FEDFF9

Tones

Muted variations

1#A40F8B
2#9C1786
3#931F80
4#8B277A
5#833075
6#7A386F
7#72406A
8#6A4964
9#62515F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0FC
BackgroundsSubtle highlightsCard backgrounds
100
FEDD
#FEDDF8
Light backgroundsTable row hoverSkeleton loading
200
FDBF
#FDBFF2
Secondary backgroundsInput backgroundsDividers
300
FB8E
#FB8EE9
BordersInactive statesPlaceholder text
400
F953
#F953DD
Disabled statesSecondary iconsMuted text
500
F722
#F722D3
Primary brand colorCTAsActive elementsLinks
600
D908
#D908B6
Hover statesFocus ringsPrimary buttons hover
700
AC06
#AC0691
Active/pressed statesDark mode accentsSecondary text
800
7B04
#7B0467
Text on light backgroundsHeadingsStrong borders
900
4F03
#4F0342
Primary textHigh emphasis contentDark headings
950
3102
#310229
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF0FC;
  --purple-100: #FEDDF8;
  --purple-200: #FDBFF2;
  --purple-300: #FB8EE9;
  --purple-400: #F953DD;
  --purple-500: #F722D3;
  --purple-600: #D908B6;
  --purple-700: #AC0691;
  --purple-800: #7B0467;
  --purple-900: #4F0342;
  --purple-950: #310229;
}
Generate More ShadesCreate PaletteConvert Color