Purple

#A90A94

Pink

Color Codes

All color formats for development

HEX
#A90A94
RGB
rgb(169, 10, 148)
HSL
hsl(308, 89%, 35%)
OKLCH
oklch(0.506 0.22 335.4)
CMYK
cmyk(0%, 94%, 12%, 34%)

Accessibility

WCAG contrast compliance

On White Background

6.65:1

AA AAA

On Black Background

3.16: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#980985
2#870876
3#760767
4#650659
5#54054A
6#43043B
7#33032C
8#22021E
9#11010F

Tints

Lighter variations

1#C80CAF
2#E70DCA
3#F224D7
4#F443DC
5#F662E2
6#F882E8
7#FAA1EE
8#FBC0F3
9#FDE0F9

Tones

Muted variations

1#A1128E
2#991A88
3#912282
4#892A7C
5#813276
6#793971
7#71416B
8#694965
9#61515F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1FC
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDF9
Light backgroundsTable row hoverSkeleton loading
200
FBC0
#FBC0F3
Secondary backgroundsInput backgroundsDividers
300
F990
#F990EB
BordersInactive statesPlaceholder text
400
F556
#F556E0
Disabled statesSecondary iconsMuted text
500
F226
#F226D7
Primary brand colorCTAsActive elementsLinks
600
D40C
#D40CB9
Hover statesFocus ringsPrimary buttons hover
700
A90A
#A90A94
Active/pressed statesDark mode accentsSecondary text
800
7807
#780769
Text on light backgroundsHeadingsStrong borders
900
4D04
#4D0443
Primary textHigh emphasis contentDark headings
950
3003
#30032A
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1FC;
  --purple-100: #FDDDF9;
  --purple-200: #FBC0F3;
  --purple-300: #F990EB;
  --purple-400: #F556E0;
  --purple-500: #F226D7;
  --purple-600: #D40CB9;
  --purple-700: #A90A94;
  --purple-800: #780769;
  --purple-900: #4D0443;
  --purple-950: #30032A;
}
Generate More ShadesCreate PaletteConvert Color