Purple

#A01371

Pink

Color Codes

All color formats for development

HEX
#A01371
RGB
rgb(160, 19, 113)
HSL
hsl(320, 79%, 35%)
OKLCH
oklch(0.476 0.19 346.7)
CMYK
cmyk(0%, 88%, 29%, 37%)

Accessibility

WCAG contrast compliance

On White Background

7.43:1

AA AAA

On Black Background

2.83: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#901165
2#800F5A
3#700D4F
4#600B44
5#500938
6#40072D
7#300622
8#200417
9#10020B

Tints

Lighter variations

1#BD1686
2#DB1A9B
3#E72FAA
4#EA4DB6
5#EE6BC2
6#F188CE
7#F5A6DA
8#F8C4E7
9#FCE1F3

Tones

Muted variations

1#991A6E
2#92216C
3#8B286A
4#842F67
5#7D3665
6#753D63
7#6E4460
8#674B5E
9#60525C

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1F9
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFF2
Light backgroundsTable row hoverSkeleton loading
200
F8C4
#F8C4E7
Secondary backgroundsInput backgroundsDividers
300
F396
#F396D4
BordersInactive statesPlaceholder text
400
EC5F
#EC5FBD
Disabled statesSecondary iconsMuted text
500
E732
#E732AA
Primary brand colorCTAsActive elementsLinks
600
C918
#C9188E
Hover statesFocus ringsPrimary buttons hover
700
A013
#A01371
Active/pressed statesDark mode accentsSecondary text
800
720D
#720D51
Text on light backgroundsHeadingsStrong borders
900
4909
#490934
Primary textHigh emphasis contentDark headings
950
2E05
#2E0520
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1F9;
  --purple-100: #FBDFF2;
  --purple-200: #F8C4E7;
  --purple-300: #F396D4;
  --purple-400: #EC5FBD;
  --purple-500: #E732AA;
  --purple-600: #C9188E;
  --purple-700: #A01371;
  --purple-800: #720D51;
  --purple-900: #490934;
  --purple-950: #2E0520;
}
Generate More ShadesCreate PaletteConvert Color