Purple

#9F05AD

Pink

Color Codes

All color formats for development

HEX
#9F05AD
RGB
rgb(159, 5, 173)
HSL
hsl(295, 94%, 35%)
OKLCH
oklch(0.504 0.234 323.9)
CMYK
cmyk(8%, 97%, 0%, 32%)

Accessibility

WCAG contrast compliance

On White Background

6.78:1

AA AAA

On Black Background

3.10:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF0
100
#FBDC
200
#F8BF
300
#F28D
400
#EC52
500
#E620
600
#C807
700
#9F05
800
#7204
900
#4902
950
#2D02

Shades

Darker variations

1#8F059C
2#7F048B
3#6F0479
4#5F0368
5#500357
6#400245
7#300234
8#200123
9#100111

Tints

Lighter variations

1#BD06CD
2#DA07ED
3#E61EF8
4#E93EF9
5#ED5EFA
6#F17EFB
7#F49FFC
8#F8BFFD
9#FBDFFE

Tones

Muted variations

1#980EA5
2#91169C
3#8A1F94
4#83278C
5#7C2F83
6#75387B
7#6E4072
8#67486A
9#605162

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF0
#FDF0FF
BackgroundsSubtle highlightsCard backgrounds
100
FBDC
#FBDCFE
Light backgroundsTable row hoverSkeleton loading
200
F8BF
#F8BFFD
Secondary backgroundsInput backgroundsDividers
300
F28D
#F28DFB
BordersInactive statesPlaceholder text
400
EC52
#EC52FA
Disabled statesSecondary iconsMuted text
500
E620
#E620F8
Primary brand colorCTAsActive elementsLinks
600
C807
#C807DA
Hover statesFocus ringsPrimary buttons hover
700
9F05
#9F05AD
Active/pressed statesDark mode accentsSecondary text
800
7204
#72047C
Text on light backgroundsHeadingsStrong borders
900
4902
#49024F
Primary textHigh emphasis contentDark headings
950
2D02
#2D0231
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF0FF;
  --purple-100: #FBDCFE;
  --purple-200: #F8BFFD;
  --purple-300: #F28DFB;
  --purple-400: #EC52FA;
  --purple-500: #E620F8;
  --purple-600: #C807DA;
  --purple-700: #9F05AD;
  --purple-800: #72047C;
  --purple-900: #49024F;
  --purple-950: #2D0231;
}
Generate More ShadesCreate PaletteConvert Color