Purple

#A013A0

Pink

Color Codes

All color formats for development

HEX
#A013A0
RGB
rgb(160, 19, 160)
HSL
hsl(300, 79%, 35%)
OKLCH
oklch(0.501 0.22 328.3)
CMYK
cmyk(0%, 88%, 0%, 37%)

Accessibility

WCAG contrast compliance

On White Background

6.78:1

AA AAA

On Black Background

3.10:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF1
100
#FBDF
200
#F8C4
300
#F396
400
#EC5F
500
#E732
600
#C918
700
#A013
800
#720D
900
#4909
950
#2E05

Shades

Darker variations

1#901190
2#800F80
3#700D70
4#600B60
5#500950
6#400740
7#300630
8#200420
9#100210

Tints

Lighter variations

1#BD16BD
2#DB1ADB
3#E72FE7
4#EA4DEA
5#EE6BEE
6#F188F1
7#F5A6F5
8#F8C4F8
9#FCE1FC

Tones

Muted variations

1#991A99
2#922192
3#8B288B
4#842F84
5#7D367D
6#753D75
7#6E446E
8#674B67
9#605260

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1FD
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFFB
Light backgroundsTable row hoverSkeleton loading
200
F8C4
#F8C4F8
Secondary backgroundsInput backgroundsDividers
300
F396
#F396F3
BordersInactive statesPlaceholder text
400
EC5F
#EC5FEC
Disabled statesSecondary iconsMuted text
500
E732
#E732E7
Primary brand colorCTAsActive elementsLinks
600
C918
#C918C9
Hover statesFocus ringsPrimary buttons hover
700
A013
#A013A0
Active/pressed statesDark mode accentsSecondary text
800
720D
#720D72
Text on light backgroundsHeadingsStrong borders
900
4909
#490949
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: #FDF1FD;
  --purple-100: #FBDFFB;
  --purple-200: #F8C4F8;
  --purple-300: #F396F3;
  --purple-400: #EC5FEC;
  --purple-500: #E732E7;
  --purple-600: #C918C9;
  --purple-700: #A013A0;
  --purple-800: #720D72;
  --purple-900: #490949;
  --purple-950: #2E052E;
}
Generate More ShadesCreate PaletteConvert Color