Purple

#AC066F

Pink

Color Codes

All color formats for development

HEX
#AC066F
RGB
rgb(172, 6, 111)
HSL
hsl(322, 93%, 35%)
OKLCH
oklch(0.492 0.202 350.8)
CMYK
cmyk(0%, 97%, 35%, 33%)

Accessibility

WCAG contrast compliance

On White Background

6.98: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
#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#9B0664
2#8A0559
3#79044E
4#670443
5#560338
6#45022D
7#340221
8#220116
9#11010B

Tints

Lighter variations

1#CC0784
2#EC0999
3#F71FA8
4#F83FB4
5#F95FC1
6#FA7FCD
7#FC9FDA
8#FDBFE6
9#FEDFF3

Tones

Muted variations

1#A40F6D
2#9C176B
3#931F69
4#8B2767
5#833064
6#7A3862
7#724060
8#6A495E
9#62515B

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0F9
BackgroundsSubtle highlightsCard backgrounds
100
FEDD
#FEDDF2
Light backgroundsTable row hoverSkeleton loading
200
FDBF
#FDBFE6
Secondary backgroundsInput backgroundsDividers
300
FB8E
#FB8ED3
BordersInactive statesPlaceholder text
400
F953
#F953BC
Disabled statesSecondary iconsMuted text
500
F722
#F722A9
Primary brand colorCTAsActive elementsLinks
600
D908
#D9088C
Hover statesFocus ringsPrimary buttons hover
700
AC06
#AC066F
Active/pressed statesDark mode accentsSecondary text
800
7B04
#7B0450
Text on light backgroundsHeadingsStrong borders
900
4F03
#4F0333
Primary textHigh emphasis contentDark headings
950
3102
#310220
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF0F9;
  --purple-100: #FEDDF2;
  --purple-200: #FDBFE6;
  --purple-300: #FB8ED3;
  --purple-400: #F953BC;
  --purple-500: #F722A9;
  --purple-600: #D9088C;
  --purple-700: #AC066F;
  --purple-800: #7B0450;
  --purple-900: #4F0333;
  --purple-950: #310220;
}
Generate More ShadesCreate PaletteConvert Color