Purple

#7B0444

Pink

Color Codes

All color formats for development

HEX
#7B0444
RGB
rgb(123, 4, 68)
HSL
hsl(328, 94%, 25%)
OKLCH
oklch(0.382 0.153 356.9)
CMYK
cmyk(0%, 97%, 45%, 52%)

Accessibility

WCAG contrast compliance

On White Background

10.81:1

AA AAA

On Black Background

1.94:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF0
100
#FEDC
200
#FDBF
300
#FB8D
400
#FA52
500
#F820
600
#DA07
700
#AD05
800
#7C04
900
#4F02
950
#3102

Shades

Darker variations

1#6F033D
2#630336
3#57032F
4#4A0229
5#3E0222
6#31021B
7#250114
8#19010E
9#0C0007

Tints

Lighter variations

1#A10558
2#C6066C
3#EB0781
4#F82093
5#F945A5
6#FA6BB7
7#FC90C9
8#FDB5DB
9#FEDAED

Tones

Muted variations

1#760A43
2#701043
3#6A1643
4#641C42
5#5E2242
6#582841
7#522E41
8#4C3441
9#463A40

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0F8
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCEE
Light backgroundsTable row hoverSkeleton loading
200
FDBF
#FDBFE0
Secondary backgroundsInput backgroundsDividers
300
FB8D
#FB8DC8
BordersInactive statesPlaceholder text
400
FA52
#FA52AB
Disabled statesSecondary iconsMuted text
500
F820
#F82093
Primary brand colorCTAsActive elementsLinks
600
DA07
#DA0777
Hover statesFocus ringsPrimary buttons hover
700
AD05
#AD055F
Active/pressed statesDark mode accentsSecondary text
800
7C04
#7C0444
Text on light backgroundsHeadingsStrong borders
900
4F02
#4F022B
Primary textHigh emphasis contentDark headings
950
3102
#31021B
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0F8;
  --purple-100: #FEDCEE;
  --purple-200: #FDBFE0;
  --purple-300: #FB8DC8;
  --purple-400: #FA52AB;
  --purple-500: #F82093;
  --purple-600: #DA0777;
  --purple-700: #AD055F;
  --purple-800: #7C0444;
  --purple-900: #4F022B;
  --purple-950: #31021B;
}
Generate More ShadesCreate PaletteConvert Color