Purple

#7A0573

Pink

Color Codes

All color formats for development

HEX
#7A0573
RGB
rgb(122, 5, 115)
HSL
hsl(304, 92%, 25%)
OKLCH
oklch(0.404 0.179 331.4)
CMYK
cmyk(0%, 96%, 6%, 52%)

Accessibility

WCAG contrast compliance

On White Background

10.02:1

AA AAA

On Black Background

2.10:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF0
100
#FEDD
200
#FCBF
300
#FA8E
400
#F854
500
#F623
600
#D709
700
#AB07
800
#7A05
900
#4E03
950
#3102

Shades

Darker variations

1#6E0567
2#62045C
3#560450
4#490345
5#3D0339
6#31022E
7#250222
8#180117
9#0C010B

Tints

Lighter variations

1#9F0795
2#C408B7
3#E90ADA
4#F623E8
5#F747EC
6#F96CEF
7#FA91F3
8#FCB6F7
9#FDDAFB

Tones

Muted variations

1#750B6D
2#6F1168
3#691763
4#631D5E
5#5D2259
6#572854
7#512E4F
8#4B344A
9#463A45

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0FD
BackgroundsSubtle highlightsCard backgrounds
100
FEDD
#FEDDFB
Light backgroundsTable row hoverSkeleton loading
200
FCBF
#FCBFF8
Secondary backgroundsInput backgroundsDividers
300
FA8E
#FA8EF3
BordersInactive statesPlaceholder text
400
F854
#F854ED
Disabled statesSecondary iconsMuted text
500
F623
#F623E8
Primary brand colorCTAsActive elementsLinks
600
D709
#D709CA
Hover statesFocus ringsPrimary buttons hover
700
AB07
#AB07A0
Active/pressed statesDark mode accentsSecondary text
800
7A05
#7A0573
Text on light backgroundsHeadingsStrong borders
900
4E03
#4E0349
Primary textHigh emphasis contentDark headings
950
3102
#31022E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF0FD;
  --purple-100: #FEDDFB;
  --purple-200: #FCBFF8;
  --purple-300: #FA8EF3;
  --purple-400: #F854ED;
  --purple-500: #F623E8;
  --purple-600: #D709CA;
  --purple-700: #AB07A0;
  --purple-800: #7A0573;
  --purple-900: #4E0349;
  --purple-950: #31022E;
}
Generate More ShadesCreate PaletteConvert Color