Purple

#9402B1

Pink

Color Codes

All color formats for development

HEX
#9402B1
RGB
rgb(148, 2, 177)
HSL
hsl(290, 98%, 35%)
OKLCH
oklch(0.489 0.235 318.9)
CMYK
cmyk(16%, 99%, 0%, 31%)

Accessibility

WCAG contrast compliance

On White Background

7.23:1

AA AAA

On Black Background

2.90:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FCF0
100
#F9DC
200
#F4BD
300
#EB8B
400
#E04E
500
#D71C
600
#BA02
700
#9402
800
#6901
900
#4301
950
#2A01

Shades

Darker variations

1#85029F
2#76018D
3#67017C
4#59016A
5#4A0158
6#3B0147
7#2C0135
8#1E0023
9#0F0012

Tints

Lighter variations

1#AF02D2
2#CA02F2
3#D719FD
4#DD3AFD
5#E25BFD
6#E87CFE
7#EE9DFE
8#F4BDFE
9#F9DEFF

Tones

Muted variations

1#8E0BA8
2#88139F
3#821C96
4#7C258E
5#762E85
6#71367C
7#6B3F73
8#65486B
9#5F5162

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FCF0
#FCF0FF
BackgroundsSubtle highlightsCard backgrounds
100
F9DC
#F9DCFF
Light backgroundsTable row hoverSkeleton loading
200
F4BD
#F4BDFE
Secondary backgroundsInput backgroundsDividers
300
EB8B
#EB8BFE
BordersInactive statesPlaceholder text
400
E04E
#E04EFD
Disabled statesSecondary iconsMuted text
500
D71C
#D71CFD
Primary brand colorCTAsActive elementsLinks
600
BA02
#BA02DE
Hover statesFocus ringsPrimary buttons hover
700
9402
#9402B1
Active/pressed statesDark mode accentsSecondary text
800
6901
#69017E
Text on light backgroundsHeadingsStrong borders
900
4301
#430151
Primary textHigh emphasis contentDark headings
950
2A01
#2A0132
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FCF0FF;
  --purple-100: #F9DCFF;
  --purple-200: #F4BDFE;
  --purple-300: #EB8BFE;
  --purple-400: #E04EFD;
  --purple-500: #D71CFD;
  --purple-600: #BA02DE;
  --purple-700: #9402B1;
  --purple-800: #69017E;
  --purple-900: #430151;
  --purple-950: #2A0132;
}
Generate More ShadesCreate PaletteConvert Color