Purple

#AA0987

Pink

Color Codes

All color formats for development

HEX
#AA0987
RGB
rgb(170, 9, 135)
HSL
hsl(313, 90%, 35%)
OKLCH
oklch(0.5 0.212 340.5)
CMYK
cmyk(0%, 95%, 21%, 33%)

Accessibility

WCAG contrast compliance

On White Background

6.78:1

AA AAA

On Black Background

3.10:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF0
100
#FDDD
200
#FCC0
300
#F990
400
#F655
500
#F425
600
#D50B
700
#AA09
800
#7906
900
#4E04
950
#3003

Shades

Darker variations

1#990879
2#88076C
3#77065E
4#660551
5#550443
6#440436
7#330328
8#22021B
9#11010D

Tints

Lighter variations

1#C90BA0
2#E90CB9
3#F323C6
4#F542CE
5#F762D6
6#F881DF
7#FAA1E7
8#FCC0EF
9#FDE0F7

Tones

Muted variations

1#A21182
2#9A197E
3#912179
4#892975
5#813170
6#79396B
7#714167
8#694962
9#61515E

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0FB
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDF6
Light backgroundsTable row hoverSkeleton loading
200
FCC0
#FCC0EF
Secondary backgroundsInput backgroundsDividers
300
F990
#F990E2
BordersInactive statesPlaceholder text
400
F655
#F655D3
Disabled statesSecondary iconsMuted text
500
F425
#F425C7
Primary brand colorCTAsActive elementsLinks
600
D50B
#D50BA9
Hover statesFocus ringsPrimary buttons hover
700
AA09
#AA0987
Active/pressed statesDark mode accentsSecondary text
800
7906
#790660
Text on light backgroundsHeadingsStrong borders
900
4E04
#4E043E
Primary textHigh emphasis contentDark headings
950
3003
#300327
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF0FB;
  --purple-100: #FDDDF6;
  --purple-200: #FCC0EF;
  --purple-300: #F990E2;
  --purple-400: #F655D3;
  --purple-500: #F425C7;
  --purple-600: #D50BA9;
  --purple-700: #AA0987;
  --purple-800: #790660;
  --purple-900: #4E043E;
  --purple-950: #300327;
}
Generate More ShadesCreate PaletteConvert Color