Purple

#80004A

Pink

Color Codes

All color formats for development

HEX
#80004A
RGB
rgb(128, 0, 74)
HSL
hsl(325, 100%, 25%)
OKLCH
oklch(0.392 0.161 354.8)
CMYK
cmyk(0%, 100%, 42%, 50%)

Accessibility

WCAG contrast compliance

On White Background

10.41:1

AA AAA

On Black Background

2.02:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF0
100
#FFDB
200
#FFBD
300
#FF8A
400
#FF4D
500
#FF1A
600
#E000
700
#B300
800
#8000
900
#5200
950
#3300

Shades

Darker variations

1#730043
2#66003C
3#590034
4#4D002D
5#400025
6#33001E
7#260016
8#1A000F
9#0D0007

Tints

Lighter variations

1#A60061
2#CC0077
3#F2008D
4#FF1A9F
5#FF40AF
6#FF66BF
7#FF8CCF
8#FFB3DF
9#FFD9EF

Tones

Muted variations

1#790649
2#730D48
3#6C1347
4#661946
5#602045
6#592644
7#532D43
8#4D3342
9#463941

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0F9
BackgroundsSubtle highlightsCard backgrounds
100
FFDB
#FFDBF0
Light backgroundsTable row hoverSkeleton loading
200
FFBD
#FFBDE3
Secondary backgroundsInput backgroundsDividers
300
FF8A
#FF8ACE
BordersInactive statesPlaceholder text
400
FF4D
#FF4DB5
Disabled statesSecondary iconsMuted text
500
FF1A
#FF1A9F
Primary brand colorCTAsActive elementsLinks
600
E000
#E00083
Hover statesFocus ringsPrimary buttons hover
700
B300
#B30068
Active/pressed statesDark mode accentsSecondary text
800
8000
#80004A
Text on light backgroundsHeadingsStrong borders
900
5200
#520030
Primary textHigh emphasis contentDark headings
950
3300
#33001E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0F9;
  --purple-100: #FFDBF0;
  --purple-200: #FFBDE3;
  --purple-300: #FF8ACE;
  --purple-400: #FF4DB5;
  --purple-500: #FF1A9F;
  --purple-600: #E00083;
  --purple-700: #B30068;
  --purple-800: #80004A;
  --purple-900: #520030;
  --purple-950: #33001E;
}
Generate More ShadesCreate PaletteConvert Color