Purple

#7A0565

Pink

Color Codes

All color formats for development

HEX
#7A0565
RGB
rgb(122, 5, 101)
HSL
hsl(311, 92%, 25%)
OKLCH
oklch(0.396 0.17 338)
CMYK
cmyk(0%, 96%, 17%, 52%)

Accessibility

WCAG contrast compliance

On White Background

10.31:1

AA AAA

On Black Background

2.04: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#6E055B
2#620451
3#560447
4#49033D
5#3D0332
6#310228
7#25021E
8#180114
9#0C010A

Tints

Lighter variations

1#9F0783
2#C408A1
3#E90AC0
4#F623CF
5#F747D7
6#F96CDF
7#FA91E7
8#FCB6EF
9#FDDAF7

Tones

Muted variations

1#750B61
2#6F115D
3#69175A
4#631D56
5#5D2252
6#57284F
7#512E4B
8#4B3447
9#463A43

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0FC
BackgroundsSubtle highlightsCard backgrounds
100
FEDD
#FEDDF8
Light backgroundsTable row hoverSkeleton loading
200
FCBF
#FCBFF1
Secondary backgroundsInput backgroundsDividers
300
FA8E
#FA8EE7
BordersInactive statesPlaceholder text
400
F854
#F854DA
Disabled statesSecondary iconsMuted text
500
F623
#F623CF
Primary brand colorCTAsActive elementsLinks
600
D709
#D709B2
Hover statesFocus ringsPrimary buttons hover
700
AB07
#AB078D
Active/pressed statesDark mode accentsSecondary text
800
7A05
#7A0565
Text on light backgroundsHeadingsStrong borders
900
4E03
#4E0341
Primary textHigh emphasis contentDark headings
950
3102
#310228
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF0FC;
  --purple-100: #FEDDF8;
  --purple-200: #FCBFF1;
  --purple-300: #FA8EE7;
  --purple-400: #F854DA;
  --purple-500: #F623CF;
  --purple-600: #D709B2;
  --purple-700: #AB078D;
  --purple-800: #7A0565;
  --purple-900: #4E0341;
  --purple-950: #310228;
}
Generate More ShadesCreate PaletteConvert Color