Purple

#79064F

Pink

Color Codes

All color formats for development

HEX
#79064F
RGB
rgb(121, 6, 79)
HSL
hsl(322, 91%, 25%)
OKLCH
oklch(0.383 0.155 349.7)
CMYK
cmyk(0%, 95%, 35%, 53%)

Accessibility

WCAG contrast compliance

On White Background

10.76:1

AA AAA

On Black Background

1.95:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF0
100
#FDDD
200
#FCC0
300
#FA8F
400
#F755
500
#F524
600
#D60A
700
#AA08
800
#7A06
900
#4E04
950
#3102

Shades

Darker variations

1#6E0547
2#61053F
3#550437
4#490330
5#3D0328
6#310220
7#250218
8#180110
9#0C0108

Tints

Lighter variations

1#9E0767
2#C3097F
3#E70B97
4#F524A8
5#F648B7
6#F86DC5
7#FA91D4
8#FCB6E2
9#FDDAF1

Tones

Muted variations

1#740C4E
2#6E114C
3#68174B
4#631D49
5#5D2347
6#572946
7#512E44
8#4B3443
9#463A41

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0F9
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDF1
Light backgroundsTable row hoverSkeleton loading
200
FCC0
#FCC0E6
Secondary backgroundsInput backgroundsDividers
300
FA8F
#FA8FD3
BordersInactive statesPlaceholder text
400
F755
#F755BB
Disabled statesSecondary iconsMuted text
500
F524
#F524A8
Primary brand colorCTAsActive elementsLinks
600
D60A
#D60A8B
Hover statesFocus ringsPrimary buttons hover
700
AA08
#AA086F
Active/pressed statesDark mode accentsSecondary text
800
7A06
#7A064F
Text on light backgroundsHeadingsStrong borders
900
4E04
#4E0433
Primary textHigh emphasis contentDark headings
950
3102
#310220
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF0F9;
  --purple-100: #FDDDF1;
  --purple-200: #FCC0E6;
  --purple-300: #FA8FD3;
  --purple-400: #F755BB;
  --purple-500: #F524A8;
  --purple-600: #D60A8B;
  --purple-700: #AA086F;
  --purple-800: #7A064F;
  --purple-900: #4E0433;
  --purple-950: #310220;
}
Generate More ShadesCreate PaletteConvert Color