Purple

#A616CA

Pink

Color Codes

All color formats for development

HEX
#A616CA
RGB
rgb(166, 22, 202)
HSL
hsl(288, 80%, 44%)
OKLCH
oklch(0.54 0.251 317.6)
CMYK
cmyk(18%, 89%, 0%, 21%)

Accessibility

WCAG contrast compliance

On White Background

5.85:1

AA AAA

On Black Background

3.59:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FBF1
100
#F6DF
200
#EEC3
300
#E195
400
#D15E
500
#C330
600
#A616
700
#8412
800
#5E0D
900
#3C08
950
#2605

Shades

Darker variations

1#9514B6
2#8512A2
3#74108D
4#640D79
5#530B65
6#420951
7#32073D
8#210428
9#110214

Tints

Lighter variations

1#BB19E4
2#C431E8
3#CB4BEB
4#D265EE
5#DA7EF1
6#E198F4
7#E9B2F6
8#F0CCF9
9#F8E5FC

Tones

Muted variations

1#A11FC1
2#9B28B8
3#9631AF
4#913AA6
5#8B439D
6#864C94
7#80558B
8#7B5E82
9#766779

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FBF1
#FBF1FD
BackgroundsSubtle highlightsCard backgrounds
100
F6DF
#F6DFFB
Light backgroundsTable row hoverSkeleton loading
200
EEC3
#EEC3F8
Secondary backgroundsInput backgroundsDividers
300
E195
#E195F3
BordersInactive statesPlaceholder text
400
D15E
#D15EED
Disabled statesSecondary iconsMuted text
500
C330
#C330E8
Primary brand colorCTAsActive elementsLinks
600
A616
#A616CA
Hover statesFocus ringsPrimary buttons hover
700
8412
#8412A1
Active/pressed statesDark mode accentsSecondary text
800
5E0D
#5E0D73
Text on light backgroundsHeadingsStrong borders
900
3C08
#3C0849
Primary textHigh emphasis contentDark headings
950
2605
#26052E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF1FD;
  --purple-100: #F6DFFB;
  --purple-200: #EEC3F8;
  --purple-300: #E195F3;
  --purple-400: #D15EED;
  --purple-500: #C330E8;
  --purple-600: #A616CA;
  --purple-700: #8412A1;
  --purple-800: #5E0D73;
  --purple-900: #3C0849;
  --purple-950: #26052E;
}
Generate More ShadesCreate PaletteConvert Color