Purple

#A30F5C

Pink

Color Codes

All color formats for development

HEX
#A30F5C
RGB
rgb(163, 15, 92)
HSL
hsl(329, 83%, 35%)
OKLCH
oklch(0.471 0.184 357.2)
CMYK
cmyk(0%, 91%, 44%, 36%)

Accessibility

WCAG contrast compliance

On White Background

7.55:1

AA AAA

On Black Background

2.78: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#930E53
2#830C49
3#720B40
4#620937
5#52082E
6#410625
7#31051C
8#210312
9#100209

Tints

Lighter variations

1#C2126D
2#E0157E
3#EB2B8E
4#EE499E
5#F167AE
6#F486BF
7#F7A4CF
8#F9C2DF
9#FCE1EF

Tones

Muted variations

1#9C175B
2#951E5B
3#8D255B
4#862D5B
5#7E345A
6#773C5A
7#6F435A
8#684A5A
9#615259

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1F8
BackgroundsSubtle highlightsCard backgrounds
100
FCDE
#FCDEEE
Light backgroundsTable row hoverSkeleton loading
200
F9C2
#F9C2DF
Secondary backgroundsInput backgroundsDividers
300
F594
#F594C6
BordersInactive statesPlaceholder text
400
F05C
#F05CA8
Disabled statesSecondary iconsMuted text
500
EB2D
#EB2D8F
Primary brand colorCTAsActive elementsLinks
600
CD13
#CD1373
Hover statesFocus ringsPrimary buttons hover
700
A30F
#A30F5C
Active/pressed statesDark mode accentsSecondary text
800
750B
#750B42
Text on light backgroundsHeadingsStrong borders
900
4B07
#4B072A
Primary textHigh emphasis contentDark headings
950
2F04
#2F041A
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1F8;
  --purple-100: #FCDEEE;
  --purple-200: #F9C2DF;
  --purple-300: #F594C6;
  --purple-400: #F05CA8;
  --purple-500: #EB2D8F;
  --purple-600: #CD1373;
  --purple-700: #A30F5C;
  --purple-800: #750B42;
  --purple-900: #4B072A;
  --purple-950: #2F041A;
}
Generate More ShadesCreate PaletteConvert Color