Purple

#7C0462

Pink

Color Codes

All color formats for development

HEX
#7C0462
RGB
rgb(124, 4, 98)
HSL
hsl(313, 94%, 25%)
OKLCH
oklch(0.397 0.169 340.4)
CMYK
cmyk(0%, 97%, 21%, 51%)

Accessibility

WCAG contrast compliance

On White Background

10.24:1

AA AAA

On Black Background

2.05: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#6F0358
2#63034E
3#570344
4#4A023B
5#3E0231
6#310227
7#25011D
8#190114
9#0C000A

Tints

Lighter variations

1#A1057F
2#C6069C
3#EB07BA
4#F820C9
5#F945D2
6#FA6BDB
7#FC90E4
8#FDB5ED
9#FEDAF6

Tones

Muted variations

1#760A5E
2#70105B
3#6A1658
4#641C54
5#5E2251
6#58284D
7#522E4A
8#4C3447
9#463A43

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0FB
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCF7
Light backgroundsTable row hoverSkeleton loading
200
FDBF
#FDBFF0
Secondary backgroundsInput backgroundsDividers
300
FB8D
#FB8DE4
BordersInactive statesPlaceholder text
400
FA52
#FA52D5
Disabled statesSecondary iconsMuted text
500
F820
#F820C9
Primary brand colorCTAsActive elementsLinks
600
DA07
#DA07AC
Hover statesFocus ringsPrimary buttons hover
700
AD05
#AD0589
Active/pressed statesDark mode accentsSecondary text
800
7C04
#7C0462
Text on light backgroundsHeadingsStrong borders
900
4F02
#4F023F
Primary textHigh emphasis contentDark headings
950
3102
#310227
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0FB;
  --purple-100: #FEDCF7;
  --purple-200: #FDBFF0;
  --purple-300: #FB8DE4;
  --purple-400: #FA52D5;
  --purple-500: #F820C9;
  --purple-600: #DA07AC;
  --purple-700: #AD0589;
  --purple-800: #7C0462;
  --purple-900: #4F023F;
  --purple-950: #310227;
}
Generate More ShadesCreate PaletteConvert Color