Purple

#AC0675

Pink

Color Codes

All color formats for development

HEX
#AC0675
RGB
rgb(172, 6, 117)
HSL
hsl(320, 93%, 35%)
OKLCH
oklch(0.494 0.205 348.3)
CMYK
cmyk(0%, 97%, 32%, 33%)

Accessibility

WCAG contrast compliance

On White Background

6.91:1

AA AAA

On Black Background

3.04: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#9B0669
2#8A055E
3#790452
4#670446
5#56033A
6#45022F
7#340223
8#220117
9#11010C

Tints

Lighter variations

1#CC078B
2#EC09A0
3#F71FAF
4#F83FBA
5#F95FC6
6#FA7FD1
7#FC9FDD
8#FDBFE8
9#FEDFF4

Tones

Muted variations

1#A40F72
2#9C176F
3#931F6D
4#8B276A
5#833067
6#7A3864
7#724062
8#6A495F
9#62515C

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0FA
BackgroundsSubtle highlightsCard backgrounds
100
FEDD
#FEDDF3
Light backgroundsTable row hoverSkeleton loading
200
FDBF
#FDBFE8
Secondary backgroundsInput backgroundsDividers
300
FB8E
#FB8ED7
BordersInactive statesPlaceholder text
400
F953
#F953C1
Disabled statesSecondary iconsMuted text
500
F722
#F722B0
Primary brand colorCTAsActive elementsLinks
600
D908
#D90893
Hover statesFocus ringsPrimary buttons hover
700
AC06
#AC0675
Active/pressed statesDark mode accentsSecondary text
800
7B04
#7B0454
Text on light backgroundsHeadingsStrong borders
900
4F03
#4F0335
Primary textHigh emphasis contentDark headings
950
3102
#310221
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF0FA;
  --purple-100: #FEDDF3;
  --purple-200: #FDBFE8;
  --purple-300: #FB8ED7;
  --purple-400: #F953C1;
  --purple-500: #F722B0;
  --purple-600: #D90893;
  --purple-700: #AC0675;
  --purple-800: #7B0454;
  --purple-900: #4F0335;
  --purple-950: #310221;
}
Generate More ShadesCreate PaletteConvert Color