Purple

#9106AC

Pink

Color Codes

All color formats for development

HEX
#9106AC
RGB
rgb(145, 6, 172)
HSL
hsl(290, 93%, 35%)
OKLCH
oklch(0.481 0.229 319.3)
CMYK
cmyk(16%, 97%, 0%, 33%)

Accessibility

WCAG contrast compliance

On White Background

7.43:1

AA AAA

On Black Background

2.83:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FCF0
100
#F8DD
200
#F2BF
300
#E98E
400
#DD53
500
#D322
600
#B608
700
#9106
800
#6704
900
#4203
950
#2902

Shades

Darker variations

1#82069B
2#74058A
3#650479
4#570467
5#480356
6#3A0245
7#2B0234
8#1D0122
9#0E0111

Tints

Lighter variations

1#AB07CC
2#C609EC
3#D31FF7
4#D93FF8
5#E05FF9
6#E67FFA
7#EC9FFC
8#F2BFFD
9#F9DFFE

Tones

Muted variations

1#8B0FA4
2#86179C
3#801F93
4#7A278B
5#753083
6#6F387A
7#6A4072
8#64496A
9#5F5162

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FCF0
#FCF0FE
BackgroundsSubtle highlightsCard backgrounds
100
F8DD
#F8DDFE
Light backgroundsTable row hoverSkeleton loading
200
F2BF
#F2BFFD
Secondary backgroundsInput backgroundsDividers
300
E98E
#E98EFB
BordersInactive statesPlaceholder text
400
DD53
#DD53F9
Disabled statesSecondary iconsMuted text
500
D322
#D322F7
Primary brand colorCTAsActive elementsLinks
600
B608
#B608D9
Hover statesFocus ringsPrimary buttons hover
700
9106
#9106AC
Active/pressed statesDark mode accentsSecondary text
800
6704
#67047B
Text on light backgroundsHeadingsStrong borders
900
4203
#42034F
Primary textHigh emphasis contentDark headings
950
2902
#290231
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FCF0FE;
  --purple-100: #F8DDFE;
  --purple-200: #F2BFFD;
  --purple-300: #E98EFB;
  --purple-400: #DD53F9;
  --purple-500: #D322F7;
  --purple-600: #B608D9;
  --purple-700: #9106AC;
  --purple-800: #67047B;
  --purple-900: #42034F;
  --purple-950: #290231;
}
Generate More ShadesCreate PaletteConvert Color