Purple

#9B04AF

Pink

Color Codes

All color formats for development

HEX
#9B04AF
RGB
rgb(155, 4, 175)
HSL
hsl(293, 96%, 35%)
OKLCH
oklch(0.498 0.235 321.9)
CMYK
cmyk(11%, 98%, 0%, 31%)

Accessibility

WCAG contrast compliance

On White Background

6.93:1

AA AAA

On Black Background

3.03:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF0
100
#FADC
200
#F6BE
300
#F08C
400
#E750
500
#E11E
600
#C304
700
#9B04
800
#6F03
900
#4702
950
#2C01

Shades

Darker variations

1#8B039D
2#7C038C
3#6C027A
4#5D0269
5#4D0257
6#3E0146
7#2E0134
8#1F0123
9#0F0011

Tints

Lighter variations

1#B804CF
2#D405F0
3#E01CFA
4#E53CFB
5#E95DFC
6#ED7DFC
7#F29EFD
8#F6BEFE
9#FBDFFE

Tones

Muted variations

1#940CA6
2#8E159E
3#871D95
4#81268D
5#7A2E84
6#74377C
7#6D4073
8#66486A
9#605162

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF0
#FDF0FF
BackgroundsSubtle highlightsCard backgrounds
100
FADC
#FADCFE
Light backgroundsTable row hoverSkeleton loading
200
F6BE
#F6BEFE
Secondary backgroundsInput backgroundsDividers
300
F08C
#F08CFD
BordersInactive statesPlaceholder text
400
E750
#E750FB
Disabled statesSecondary iconsMuted text
500
E11E
#E11EFA
Primary brand colorCTAsActive elementsLinks
600
C304
#C304DC
Hover statesFocus ringsPrimary buttons hover
700
9B04
#9B04AF
Active/pressed statesDark mode accentsSecondary text
800
6F03
#6F037D
Text on light backgroundsHeadingsStrong borders
900
4702
#470250
Primary textHigh emphasis contentDark headings
950
2C01
#2C0132
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF0FF;
  --purple-100: #FADCFE;
  --purple-200: #F6BEFE;
  --purple-300: #F08CFD;
  --purple-400: #E750FB;
  --purple-500: #E11EFA;
  --purple-600: #C304DC;
  --purple-700: #9B04AF;
  --purple-800: #6F037D;
  --purple-900: #470250;
  --purple-950: #2C0132;
}
Generate More ShadesCreate PaletteConvert Color