Purple

#7D034A

Pink

Color Codes

All color formats for development

HEX
#7D034A
RGB
rgb(125, 3, 74)
HSL
hsl(325, 95%, 25%)
OKLCH
oklch(0.387 0.157 354)
CMYK
cmyk(0%, 98%, 41%, 51%)

Accessibility

WCAG contrast compliance

On White Background

10.59:1

AA AAA

On Black Background

1.98:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF0
100
#FEDC
200
#FDBE
300
#FC8D
400
#FB51
500
#F91F
600
#DB06
700
#AE04
800
#7C03
900
#5002
950
#3201

Shades

Darker variations

1#700342
2#63033B
3#570234
4#4B022C
5#3E0225
6#32011E
7#250116
8#19010F
9#0C0007

Tints

Lighter variations

1#A20460
2#C70576
3#EC068C
4#F91F9E
5#FA45AF
6#FB6ABF
7#FC8FCF
8#FDB4DF
9#FEDAEF

Tones

Muted variations

1#760949
2#700F48
3#6A1547
4#641B46
5#5E2145
6#582844
7#522E43
8#4C3442
9#463A41

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0F9
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCF0
Light backgroundsTable row hoverSkeleton loading
200
FDBE
#FDBEE3
Secondary backgroundsInput backgroundsDividers
300
FC8D
#FC8DCE
BordersInactive statesPlaceholder text
400
FB51
#FB51B4
Disabled statesSecondary iconsMuted text
500
F91F
#F91F9E
Primary brand colorCTAsActive elementsLinks
600
DB06
#DB0682
Hover statesFocus ringsPrimary buttons hover
700
AE04
#AE0467
Active/pressed statesDark mode accentsSecondary text
800
7C03
#7C034A
Text on light backgroundsHeadingsStrong borders
900
5002
#50022F
Primary textHigh emphasis contentDark headings
950
3201
#32011E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0F9;
  --purple-100: #FEDCF0;
  --purple-200: #FDBEE3;
  --purple-300: #FC8DCE;
  --purple-400: #FB51B4;
  --purple-500: #F91F9E;
  --purple-600: #DB0682;
  --purple-700: #AE0467;
  --purple-800: #7C034A;
  --purple-900: #50022F;
  --purple-950: #32011E;
}
Generate More ShadesCreate PaletteConvert Color