Purple

#AA099F

Pink

Color Codes

All color formats for development

HEX
#AA099F
RGB
rgb(170, 9, 159)
HSL
hsl(304, 90%, 35%)
OKLCH
oklch(0.513 0.228 331.9)
CMYK
cmyk(0%, 95%, 6%, 33%)

Accessibility

WCAG contrast compliance

On White Background

6.46:1

AA AAA

On Black Background

3.25: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#99088F
2#88077F
3#77066F
4#66055F
5#55044F
6#440440
7#330330
8#220220
9#110110

Tints

Lighter variations

1#C90BBC
2#E90CDA
3#F323E5
4#F542E9
5#F762ED
6#F881F0
7#FAA1F4
8#FCC0F8
9#FDE0FB

Tones

Muted variations

1#A21198
2#9A1991
3#91218A
4#892983
5#81317C
6#793975
7#71416E
8#694967
9#615160

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0FD
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDFB
Light backgroundsTable row hoverSkeleton loading
200
FCC0
#FCC0F8
Secondary backgroundsInput backgroundsDividers
300
F990
#F990F2
BordersInactive statesPlaceholder text
400
F655
#F655EB
Disabled statesSecondary iconsMuted text
500
F425
#F425E6
Primary brand colorCTAsActive elementsLinks
600
D50B
#D50BC8
Hover statesFocus ringsPrimary buttons hover
700
AA09
#AA099F
Active/pressed statesDark mode accentsSecondary text
800
7906
#790671
Text on light backgroundsHeadingsStrong borders
900
4E04
#4E0449
Primary textHigh emphasis contentDark headings
950
3003
#30032D
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF0FD;
  --purple-100: #FDDDFB;
  --purple-200: #FCC0F8;
  --purple-300: #F990F2;
  --purple-400: #F655EB;
  --purple-500: #F425E6;
  --purple-600: #D50BC8;
  --purple-700: #AA099F;
  --purple-800: #790671;
  --purple-900: #4E0449;
  --purple-950: #30032D;
}
Generate More ShadesCreate PaletteConvert Color