Purple

#A20EA4

Pink

Color Codes

All color formats for development

HEX
#A20EA4
RGB
rgb(162, 14, 164)
HSL
hsl(299, 84%, 35%)
OKLCH
oklch(0.505 0.226 327.6)
CMYK
cmyk(1%, 91%, 0%, 36%)

Accessibility

WCAG contrast compliance

On White Background

6.70: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
#FCDE
200
#F9C2
300
#F493
400
#EE5B
500
#E92C
600
#CB12
700
#A20E
800
#740A
900
#4A07
950
#2E04

Shades

Darker variations

1#920D94
2#810B83
3#710A73
4#610963
5#510752
6#410642
7#310431
8#200321
9#100110

Tints

Lighter variations

1#C011C3
2#DE14E1
3#E92AEC
4#EC48EF
5#EF67F2
6#F385F4
7#F6A4F7
8#F9C2FA
9#FCE1FC

Tones

Muted variations

1#9A169D
2#931D95
3#8C258E
4#852C86
5#7D347F
6#763B77
7#6F4370
8#684A68
9#605261

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1FE
BackgroundsSubtle highlightsCard backgrounds
100
FCDE
#FCDEFC
Light backgroundsTable row hoverSkeleton loading
200
F9C2
#F9C2FA
Secondary backgroundsInput backgroundsDividers
300
F493
#F493F6
BordersInactive statesPlaceholder text
400
EE5B
#EE5BF1
Disabled statesSecondary iconsMuted text
500
E92C
#E92CED
Primary brand colorCTAsActive elementsLinks
600
CB12
#CB12CE
Hover statesFocus ringsPrimary buttons hover
700
A20E
#A20EA4
Active/pressed statesDark mode accentsSecondary text
800
740A
#740A75
Text on light backgroundsHeadingsStrong borders
900
4A07
#4A074B
Primary textHigh emphasis contentDark headings
950
2E04
#2E042F
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1FE;
  --purple-100: #FCDEFC;
  --purple-200: #F9C2FA;
  --purple-300: #F493F6;
  --purple-400: #EE5BF1;
  --purple-500: #E92CED;
  --purple-600: #CB12CE;
  --purple-700: #A20EA4;
  --purple-800: #740A75;
  --purple-900: #4A074B;
  --purple-950: #2E042F;
}
Generate More ShadesCreate PaletteConvert Color