Purple

#A30FA3

Pink

Color Codes

All color formats for development

HEX
#A30FA3
RGB
rgb(163, 15, 163)
HSL
hsl(300, 83%, 35%)
OKLCH
oklch(0.506 0.225 328.3)
CMYK
cmyk(0%, 91%, 0%, 36%)

Accessibility

WCAG contrast compliance

On White Background

6.66:1

AA AAA

On Black Background

3.15: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#930E93
2#830C83
3#720B72
4#620962
5#520852
6#410641
7#310531
8#210321
9#100210

Tints

Lighter variations

1#C212C2
2#E015E0
3#EB2BEB
4#EE49EE
5#F167F1
6#F486F4
7#F7A4F7
8#F9C2F9
9#FCE1FC

Tones

Muted variations

1#9C179C
2#951E95
3#8D258D
4#862D86
5#7E347E
6#773C77
7#6F436F
8#684A68
9#615261

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1FE
BackgroundsSubtle highlightsCard backgrounds
100
FCDE
#FCDEFC
Light backgroundsTable row hoverSkeleton loading
200
F9C2
#F9C2F9
Secondary backgroundsInput backgroundsDividers
300
F594
#F594F5
BordersInactive statesPlaceholder text
400
F05C
#F05CF0
Disabled statesSecondary iconsMuted text
500
EB2D
#EB2DEB
Primary brand colorCTAsActive elementsLinks
600
CD13
#CD13CD
Hover statesFocus ringsPrimary buttons hover
700
A30F
#A30FA3
Active/pressed statesDark mode accentsSecondary text
800
750B
#750B75
Text on light backgroundsHeadingsStrong borders
900
4B07
#4B074B
Primary textHigh emphasis contentDark headings
950
2F04
#2F042F
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1FE;
  --purple-100: #FCDEFC;
  --purple-200: #F9C2F9;
  --purple-300: #F594F5;
  --purple-400: #F05CF0;
  --purple-500: #EB2DEB;
  --purple-600: #CD13CD;
  --purple-700: #A30FA3;
  --purple-800: #750B75;
  --purple-900: #4B074B;
  --purple-950: #2F042F;
}
Generate More ShadesCreate PaletteConvert Color