Purple

#A90A86

Pink

Color Codes

All color formats for development

HEX
#A90A86
RGB
rgb(169, 10, 134)
HSL
hsl(313, 89%, 35%)
OKLCH
oklch(0.498 0.211 340.6)
CMYK
cmyk(0%, 94%, 21%, 34%)

Accessibility

WCAG contrast compliance

On White Background

6.83:1

AA AAA

On Black Background

3.07:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF1
100
#FDDD
200
#FBC0
300
#F990
400
#F556
500
#F226
600
#D40C
700
#A90A
800
#7807
900
#4D04
950
#3003

Shades

Darker variations

1#980979
2#87086B
3#76075E
4#650651
5#540543
6#430436
7#330328
8#22021B
9#11010D

Tints

Lighter variations

1#C80C9F
2#E70DB8
3#F224C5
4#F443CE
5#F662D6
6#F882DE
7#FAA1E6
8#FBC0EF
9#FDE0F7

Tones

Muted variations

1#A11282
2#991A7D
3#912279
4#892A74
5#813270
6#79396B
7#714167
8#694962
9#61515E

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1FB
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDF6
Light backgroundsTable row hoverSkeleton loading
200
FBC0
#FBC0EF
Secondary backgroundsInput backgroundsDividers
300
F990
#F990E2
BordersInactive statesPlaceholder text
400
F556
#F556D3
Disabled statesSecondary iconsMuted text
500
F226
#F226C6
Primary brand colorCTAsActive elementsLinks
600
D40C
#D40CA9
Hover statesFocus ringsPrimary buttons hover
700
A90A
#A90A86
Active/pressed statesDark mode accentsSecondary text
800
7807
#780760
Text on light backgroundsHeadingsStrong borders
900
4D04
#4D043D
Primary textHigh emphasis contentDark headings
950
3003
#300326
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1FB;
  --purple-100: #FDDDF6;
  --purple-200: #FBC0EF;
  --purple-300: #F990E2;
  --purple-400: #F556D3;
  --purple-500: #F226C6;
  --purple-600: #D40CA9;
  --purple-700: #A90A86;
  --purple-800: #780760;
  --purple-900: #4D043D;
  --purple-950: #300326;
}
Generate More ShadesCreate PaletteConvert Color