Purple

#A11295

Pink

Color Codes

All color formats for development

HEX
#A11295
RGB
rgb(161, 18, 149)
HSL
hsl(305, 80%, 35%)
OKLCH
oklch(0.496 0.213 332.4)
CMYK
cmyk(0%, 89%, 7%, 37%)

Accessibility

WCAG contrast compliance

On White Background

6.92:1

AA AAA

On Black Background

3.04:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF1
100
#FBDF
200
#F8C3
300
#F395
400
#ED5E
500
#E830
600
#CA16
700
#A112
800
#730D
900
#4908
950
#2E05

Shades

Darker variations

1#911086
2#810E77
3#700C68
4#600B59
5#50094A
6#40073C
7#30052D
8#20041E
9#10020F

Tints

Lighter variations

1#BE15B0
2#DC18CC
3#E82ED8
4#EB4CDE
5#EE6AE3
6#F288E9
7#F5A5EE
8#F8C3F4
9#FCE1F9

Tones

Muted variations

1#9A198F
2#922089
3#8B2783
4#842E7D
5#7D3677
6#763D71
7#6F446B
8#684B65
9#60525F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1FC
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFF9
Light backgroundsTable row hoverSkeleton loading
200
F8C3
#F8C3F4
Secondary backgroundsInput backgroundsDividers
300
F395
#F395EB
BordersInactive statesPlaceholder text
400
ED5E
#ED5EE1
Disabled statesSecondary iconsMuted text
500
E830
#E830D9
Primary brand colorCTAsActive elementsLinks
600
CA16
#CA16BB
Hover statesFocus ringsPrimary buttons hover
700
A112
#A11295
Active/pressed statesDark mode accentsSecondary text
800
730D
#730D6A
Text on light backgroundsHeadingsStrong borders
900
4908
#490844
Primary textHigh emphasis contentDark headings
950
2E05
#2E052B
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1FC;
  --purple-100: #FBDFF9;
  --purple-200: #F8C3F4;
  --purple-300: #F395EB;
  --purple-400: #ED5EE1;
  --purple-500: #E830D9;
  --purple-600: #CA16BB;
  --purple-700: #A11295;
  --purple-800: #730D6A;
  --purple-900: #490844;
  --purple-950: #2E052B;
}
Generate More ShadesCreate PaletteConvert Color