Purple

#A30F9E

Pink

Color Codes

All color formats for development

HEX
#A30F9E
RGB
rgb(163, 15, 158)
HSL
hsl(302, 83%, 35%)
OKLCH
oklch(0.503 0.222 330)
CMYK
cmyk(0%, 91%, 3%, 36%)

Accessibility

WCAG contrast compliance

On White Background

6.73:1

AA AAA

On Black Background

3.12: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#930E8F
2#830C7F
3#720B6F
4#62095F
5#52084F
6#41063F
7#310530
8#210320
9#100210

Tints

Lighter variations

1#C212BC
2#E015D9
3#EB2BE5
4#EE49E9
5#F167EC
6#F486F0
7#F7A4F4
8#F9C2F8
9#FCE1FB

Tones

Muted variations

1#9C1797
2#951E91
3#8D258A
4#862D83
5#7E347C
6#773C75
7#6F436E
8#684A67
9#615260

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1FD
BackgroundsSubtle highlightsCard backgrounds
100
FCDE
#FCDEFB
Light backgroundsTable row hoverSkeleton loading
200
F9C2
#F9C2F8
Secondary backgroundsInput backgroundsDividers
300
F594
#F594F2
BordersInactive statesPlaceholder text
400
F05C
#F05CEB
Disabled statesSecondary iconsMuted text
500
EB2D
#EB2DE5
Primary brand colorCTAsActive elementsLinks
600
CD13
#CD13C7
Hover statesFocus ringsPrimary buttons hover
700
A30F
#A30F9E
Active/pressed statesDark mode accentsSecondary text
800
750B
#750B71
Text on light backgroundsHeadingsStrong borders
900
4B07
#4B0748
Primary textHigh emphasis contentDark headings
950
2F04
#2F042D
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1FD;
  --purple-100: #FCDEFB;
  --purple-200: #F9C2F8;
  --purple-300: #F594F2;
  --purple-400: #F05CEB;
  --purple-500: #EB2DE5;
  --purple-600: #CD13C7;
  --purple-700: #A30F9E;
  --purple-800: #750B71;
  --purple-900: #4B0748;
  --purple-950: #2F042D;
}
Generate More ShadesCreate PaletteConvert Color