Purple

#A813CD

Pink

Color Codes

All color formats for development

HEX
#A813CD
RGB
rgb(168, 19, 205)
HSL
hsl(288, 83%, 44%)
OKLCH
oklch(0.544 0.255 317.5)
CMYK
cmyk(18%, 91%, 0%, 20%)

Accessibility

WCAG contrast compliance

On White Background

5.77:1

AA AAA

On Black Background

3.64:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FBF1
100
#F6DE
200
#EEC2
300
#E294
400
#D25C
500
#C52D
600
#A813
700
#860F
800
#5F0B
900
#3D07
950
#2604

Shades

Darker variations

1#9711B9
2#860FA4
3#760D90
4#650B7B
5#540A67
6#430852
7#32063E
8#220429
9#110215

Tints

Lighter variations

1#BD16E7
2#C62EEC
3#CD48EE
4#D462F0
5#DB7CF3
6#E296F5
7#E9B1F8
8#F1CBFA
9#F8E5FD

Tones

Muted variations

1#A21CC4
2#9D26BB
3#972FB1
4#9238A8
5#8C429F
6#874B95
7#81548C
8#7B5E83
9#76677A

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FBF1
#FBF1FE
BackgroundsSubtle highlightsCard backgrounds
100
F6DE
#F6DEFC
Light backgroundsTable row hoverSkeleton loading
200
EEC2
#EEC2F9
Secondary backgroundsInput backgroundsDividers
300
E294
#E294F5
BordersInactive statesPlaceholder text
400
D25C
#D25CF0
Disabled statesSecondary iconsMuted text
500
C52D
#C52DEB
Primary brand colorCTAsActive elementsLinks
600
A813
#A813CD
Hover statesFocus ringsPrimary buttons hover
700
860F
#860FA3
Active/pressed statesDark mode accentsSecondary text
800
5F0B
#5F0B75
Text on light backgroundsHeadingsStrong borders
900
3D07
#3D074B
Primary textHigh emphasis contentDark headings
950
2604
#26042F
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF1FE;
  --purple-100: #F6DEFC;
  --purple-200: #EEC2F9;
  --purple-300: #E294F5;
  --purple-400: #D25CF0;
  --purple-500: #C52DEB;
  --purple-600: #A813CD;
  --purple-700: #860FA3;
  --purple-800: #5F0B75;
  --purple-900: #3D074B;
  --purple-950: #26042F;
}
Generate More ShadesCreate PaletteConvert Color