Purple

#AD0597

Pink

Color Codes

All color formats for development

HEX
#AD0597
RGB
rgb(173, 5, 151)
HSL
hsl(308, 94%, 35%)
OKLCH
oklch(0.513 0.225 335.6)
CMYK
cmyk(0%, 97%, 13%, 32%)

Accessibility

WCAG contrast compliance

On White Background

6.47:1

AA AAA

On Black Background

3.25: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#9C0588
2#8B0479
3#79046A
4#68035A
5#57034B
6#45023C
7#34022D
8#23011E
9#11010F

Tints

Lighter variations

1#CD06B3
2#ED07CF
3#F81EDB
4#F93EE0
5#FA5EE5
6#FB7EEA
7#FC9FF0
8#FDBFF5
9#FEDFFA

Tones

Muted variations

1#A50E91
2#9C168A
3#941F84
4#8C277E
5#832F78
6#7B3872
7#72406C
8#6A4866
9#62515F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0FD
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCF9
Light backgroundsTable row hoverSkeleton loading
200
FDBF
#FDBFF5
Secondary backgroundsInput backgroundsDividers
300
FB8D
#FB8DED
BordersInactive statesPlaceholder text
400
FA52
#FA52E3
Disabled statesSecondary iconsMuted text
500
F820
#F820DB
Primary brand colorCTAsActive elementsLinks
600
DA07
#DA07BE
Hover statesFocus ringsPrimary buttons hover
700
AD05
#AD0597
Active/pressed statesDark mode accentsSecondary text
800
7C04
#7C046C
Text on light backgroundsHeadingsStrong borders
900
4F02
#4F0245
Primary textHigh emphasis contentDark headings
950
3102
#31022B
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0FD;
  --purple-100: #FEDCF9;
  --purple-200: #FDBFF5;
  --purple-300: #FB8DED;
  --purple-400: #FA52E3;
  --purple-500: #F820DB;
  --purple-600: #DA07BE;
  --purple-700: #AD0597;
  --purple-800: #7C046C;
  --purple-900: #4F0245;
  --purple-950: #31022B;
}
Generate More ShadesCreate PaletteConvert Color