Purple

#A211A2

Pink

Color Codes

All color formats for development

HEX
#A211A2
RGB
rgb(162, 17, 162)
HSL
hsl(300, 81%, 35%)
OKLCH
oklch(0.505 0.223 328.3)
CMYK
cmyk(0%, 90%, 0%, 36%)

Accessibility

WCAG contrast compliance

On White Background

6.69:1

AA AAA

On Black Background

3.14:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF1
100
#FCDF
200
#F9C3
300
#F495
400
#EE5D
500
#E92F
600
#CB15
700
#A211
800
#730C
900
#4A08
950
#2E05

Shades

Darker variations

1#910F91
2#810E81
3#710C71
4#610A61
5#510851
6#410741
7#300530
8#200320
9#100210

Tints

Lighter variations

1#C014C0
2#DE17DE
3#E92DE9
4#EC4BEC
5#EF69EF
6#F287F2
7#F6A5F6
8#F9C3F9
9#FCE1FC

Tones

Muted variations

1#9A189A
2#931F93
3#8C278C
4#852E85
5#7D357D
6#763C76
7#6F446F
8#684B68
9#605260

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1FE
BackgroundsSubtle highlightsCard backgrounds
100
FCDF
#FCDFFC
Light backgroundsTable row hoverSkeleton loading
200
F9C3
#F9C3F9
Secondary backgroundsInput backgroundsDividers
300
F495
#F495F4
BordersInactive statesPlaceholder text
400
EE5D
#EE5DEE
Disabled statesSecondary iconsMuted text
500
E92F
#E92FE9
Primary brand colorCTAsActive elementsLinks
600
CB15
#CB15CB
Hover statesFocus ringsPrimary buttons hover
700
A211
#A211A2
Active/pressed statesDark mode accentsSecondary text
800
730C
#730C73
Text on light backgroundsHeadingsStrong borders
900
4A08
#4A084A
Primary textHigh emphasis contentDark headings
950
2E05
#2E052E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1FE;
  --purple-100: #FCDFFC;
  --purple-200: #F9C3F9;
  --purple-300: #F495F4;
  --purple-400: #EE5DEE;
  --purple-500: #E92FE9;
  --purple-600: #CB15CB;
  --purple-700: #A211A2;
  --purple-800: #730C73;
  --purple-900: #4A084A;
  --purple-950: #2E052E;
}
Generate More ShadesCreate PaletteConvert Color