Purple

#730D4C

Pink

Color Codes

All color formats for development

HEX
#730D4C
RGB
rgb(115, 13, 76)
HSL
hsl(323, 80%, 25%)
OKLCH
oklch(0.374 0.145 349.4)
CMYK
cmyk(0%, 89%, 34%, 55%)

Accessibility

WCAG contrast compliance

On White Background

11.11:1

AA AAA

On Black Background

1.89: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#670B44
2#5C0A3D
3#500935
4#45082D
5#390626
6#2E051E
7#220417
8#17030F
9#0B0108

Tints

Lighter variations

1#951162
2#B81479
3#DA1890
4#E830A2
5#EC53B1
6#F075C1
7#F498D0
8#F7BAE0
9#FBDDEF

Tones

Muted variations

1#6E124A
2#691749
3#631C48
4#5E2147
5#592646
6#542B45
7#4F3043
8#4A3642
9#453B41

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1F9
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFF0
Light backgroundsTable row hoverSkeleton loading
200
F8C3
#F8C3E4
Secondary backgroundsInput backgroundsDividers
300
F395
#F395CF
BordersInactive statesPlaceholder text
400
ED5E
#ED5EB6
Disabled statesSecondary iconsMuted text
500
E830
#E830A2
Primary brand colorCTAsActive elementsLinks
600
CA16
#CA1685
Hover statesFocus ringsPrimary buttons hover
700
A112
#A1126A
Active/pressed statesDark mode accentsSecondary text
800
730D
#730D4C
Text on light backgroundsHeadingsStrong borders
900
4908
#490830
Primary textHigh emphasis contentDark headings
950
2E05
#2E051E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1F9;
  --purple-100: #FBDFF0;
  --purple-200: #F8C3E4;
  --purple-300: #F395CF;
  --purple-400: #ED5EB6;
  --purple-500: #E830A2;
  --purple-600: #CA1685;
  --purple-700: #A1126A;
  --purple-800: #730D4C;
  --purple-900: #490830;
  --purple-950: #2E051E;
}
Generate More ShadesCreate PaletteConvert Color