Purple

#AC0693

Pink

Color Codes

All color formats for development

HEX
#AC0693
RGB
rgb(172, 6, 147)
HSL
hsl(309, 93%, 35%)
OKLCH
oklch(0.509 0.222 336.7)
CMYK
cmyk(0%, 97%, 15%, 33%)

Accessibility

WCAG contrast compliance

On White Background

6.56:1

AA AAA

On Black Background

3.20: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#9B0685
2#8A0576
3#790467
4#670458
5#56034A
6#45023B
7#34022C
8#22011D
9#11010F

Tints

Lighter variations

1#CC07AF
2#EC09CA
3#F71FD7
4#F83FDC
5#F95FE2
6#FA7FE8
7#FC9FEE
8#FDBFF3
9#FEDFF9

Tones

Muted variations

1#A40F8E
2#9C1788
3#931F82
4#8B277C
5#833076
6#7A3870
7#72406B
8#6A4965
9#62515F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0FC
BackgroundsSubtle highlightsCard backgrounds
100
FEDD
#FEDDF9
Light backgroundsTable row hoverSkeleton loading
200
FDBF
#FDBFF3
Secondary backgroundsInput backgroundsDividers
300
FB8E
#FB8EEB
BordersInactive statesPlaceholder text
400
F953
#F953E0
Disabled statesSecondary iconsMuted text
500
F722
#F722D7
Primary brand colorCTAsActive elementsLinks
600
D908
#D908B9
Hover statesFocus ringsPrimary buttons hover
700
AC06
#AC0693
Active/pressed statesDark mode accentsSecondary text
800
7B04
#7B0469
Text on light backgroundsHeadingsStrong borders
900
4F03
#4F0343
Primary textHigh emphasis contentDark headings
950
3102
#31022A
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF0FC;
  --purple-100: #FEDDF9;
  --purple-200: #FDBFF3;
  --purple-300: #FB8EEB;
  --purple-400: #F953E0;
  --purple-500: #F722D7;
  --purple-600: #D908B9;
  --purple-700: #AC0693;
  --purple-800: #7B0469;
  --purple-900: #4F0343;
  --purple-950: #31022A;
}
Generate More ShadesCreate PaletteConvert Color