Purple

#A01394

Pink

Color Codes

All color formats for development

HEX
#A01394
RGB
rgb(160, 19, 148)
HSL
hsl(305, 79%, 35%)
OKLCH
oklch(0.494 0.211 332.5)
CMYK
cmyk(0%, 88%, 7%, 37%)

Accessibility

WCAG contrast compliance

On White Background

6.96:1

AA AAA

On Black Background

3.02: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#901185
2#800F76
3#700D68
4#600B59
5#50094A
6#40073B
7#30062C
8#20041E
9#10020F

Tints

Lighter variations

1#BD16AF
2#DB1ACB
3#E72FD7
4#EA4DDD
5#EE6BE3
6#F188E8
7#F5A6EE
8#F8C4F4
9#FCE1F9

Tones

Muted variations

1#991A8E
2#922188
3#8B2882
4#842F7D
5#7D3677
6#753D71
7#6E446B
8#674B65
9#60525F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1FC
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFF9
Light backgroundsTable row hoverSkeleton loading
200
F8C4
#F8C4F4
Secondary backgroundsInput backgroundsDividers
300
F396
#F396EB
BordersInactive statesPlaceholder text
400
EC5F
#EC5FE1
Disabled statesSecondary iconsMuted text
500
E732
#E732D8
Primary brand colorCTAsActive elementsLinks
600
C918
#C918BA
Hover statesFocus ringsPrimary buttons hover
700
A013
#A01394
Active/pressed statesDark mode accentsSecondary text
800
720D
#720D6A
Text on light backgroundsHeadingsStrong borders
900
4909
#490944
Primary textHigh emphasis contentDark headings
950
2E05
#2E052A
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1FC;
  --purple-100: #FBDFF9;
  --purple-200: #F8C4F4;
  --purple-300: #F396EB;
  --purple-400: #EC5FE1;
  --purple-500: #E732D8;
  --purple-600: #C918BA;
  --purple-700: #A01394;
  --purple-800: #720D6A;
  --purple-900: #490944;
  --purple-950: #2E052A;
}
Generate More ShadesCreate PaletteConvert Color