Purple

#A30F95

Pink

Color Codes

All color formats for development

HEX
#A30F95
RGB
rgb(163, 15, 149)
HSL
hsl(306, 83%, 35%)
OKLCH
oklch(0.498 0.216 333.1)
CMYK
cmyk(0%, 91%, 9%, 36%)

Accessibility

WCAG contrast compliance

On White Background

6.86:1

AA AAA

On Black Background

3.06:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF1
100
#FCDE
200
#F9C2
300
#F594
400
#F05C
500
#EB2D
600
#CD13
700
#A30F
800
#750B
900
#4B07
950
#2F04

Shades

Darker variations

1#930E86
2#830C77
3#720B68
4#620959
5#52084A
6#41063B
7#31052D
8#21031E
9#10020F

Tints

Lighter variations

1#C212B0
2#E015CC
3#EB2BD8
4#EE49DE
5#F167E3
6#F486E9
7#F7A4EE
8#F9C2F4
9#FCE1F9

Tones

Muted variations

1#9C178F
2#951E89
3#8D2583
4#862D7D
5#7E3477
6#773C71
7#6F436B
8#684A65
9#61525F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1FC
BackgroundsSubtle highlightsCard backgrounds
100
FCDE
#FCDEF9
Light backgroundsTable row hoverSkeleton loading
200
F9C2
#F9C2F4
Secondary backgroundsInput backgroundsDividers
300
F594
#F594EB
BordersInactive statesPlaceholder text
400
F05C
#F05CE1
Disabled statesSecondary iconsMuted text
500
EB2D
#EB2DD8
Primary brand colorCTAsActive elementsLinks
600
CD13
#CD13BB
Hover statesFocus ringsPrimary buttons hover
700
A30F
#A30F95
Active/pressed statesDark mode accentsSecondary text
800
750B
#750B6A
Text on light backgroundsHeadingsStrong borders
900
4B07
#4B0744
Primary textHigh emphasis contentDark headings
950
2F04
#2F042A
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1FC;
  --purple-100: #FCDEF9;
  --purple-200: #F9C2F4;
  --purple-300: #F594EB;
  --purple-400: #F05CE1;
  --purple-500: #EB2DD8;
  --purple-600: #CD13BB;
  --purple-700: #A30F95;
  --purple-800: #750B6A;
  --purple-900: #4B0744;
  --purple-950: #2F042A;
}
Generate More ShadesCreate PaletteConvert Color