Purple

#950EA4

Pink

Color Codes

All color formats for development

HEX
#950EA4
RGB
rgb(149, 14, 164)
HSL
hsl(294, 84%, 35%)
OKLCH
oklch(0.484 0.221 323.2)
CMYK
cmyk(9%, 91%, 0%, 36%)

Accessibility

WCAG contrast compliance

On White Background

7.30:1

AA AAA

On Black Background

2.88:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FCF1
100
#F9DE
200
#F4C2
300
#EC93
400
#E25B
500
#D92C
600
#BC12
700
#950E
800
#6B0A
900
#4407
950
#2B04

Shades

Darker variations

1#860D94
2#770B83
3#680A73
4#5A0963
5#4B0752
6#3C0642
7#2D0431
8#1E0321
9#0F0110

Tints

Lighter variations

1#B111C3
2#CD14E1
3#D92AEC
4#DE48EF
5#E467F2
6#E985F4
7#EFA4F7
8#F4C2FA
9#FAE1FC

Tones

Muted variations

1#8F169D
2#891D95
3#83258E
4#7D2C86
5#77347F
6#713B77
7#6B4370
8#654A68
9#5F5261

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FCF1
#FCF1FE
BackgroundsSubtle highlightsCard backgrounds
100
F9DE
#F9DEFC
Light backgroundsTable row hoverSkeleton loading
200
F4C2
#F4C2FA
Secondary backgroundsInput backgroundsDividers
300
EC93
#EC93F6
BordersInactive statesPlaceholder text
400
E25B
#E25BF1
Disabled statesSecondary iconsMuted text
500
D92C
#D92CED
Primary brand colorCTAsActive elementsLinks
600
BC12
#BC12CE
Hover statesFocus ringsPrimary buttons hover
700
950E
#950EA4
Active/pressed statesDark mode accentsSecondary text
800
6B0A
#6B0A75
Text on light backgroundsHeadingsStrong borders
900
4407
#44074B
Primary textHigh emphasis contentDark headings
950
2B04
#2B042F
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FCF1FE;
  --purple-100: #F9DEFC;
  --purple-200: #F4C2FA;
  --purple-300: #EC93F6;
  --purple-400: #E25BF1;
  --purple-500: #D92CED;
  --purple-600: #BC12CE;
  --purple-700: #950EA4;
  --purple-800: #6B0A75;
  --purple-900: #44074B;
  --purple-950: #2B042F;
}
Generate More ShadesCreate PaletteConvert Color