Purple

#9E10A2

Pink

Color Codes

All color formats for development

HEX
#9E10A2
RGB
rgb(158, 16, 162)
HSL
hsl(298, 82%, 35%)
OKLCH
oklch(0.498 0.222 326.9)
CMYK
cmyk(2%, 90%, 0%, 36%)

Accessibility

WCAG contrast compliance

On White Background

6.89:1

AA AAA

On Black Background

3.05:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF1
100
#FBDF
200
#F7C3
300
#F194
400
#EA5D
500
#E42E
600
#C614
700
#9E10
800
#710B
900
#4807
950
#2D05

Shades

Darker variations

1#8E0E92
2#7E0D82
3#6E0B72
4#5F0A61
5#4F0851
6#3F0641
7#2F0531
8#200320
9#100210

Tints

Lighter variations

1#BB13C1
2#D816DF
3#E42CEA
4#E84AED
5#EC68F0
6#EF86F3
7#F3A5F6
8#F7C3F9
9#FBE1FC

Tones

Muted variations

1#97179B
2#901F94
3#89268C
4#822D85
5#7B357E
6#753C77
7#6E436F
8#674B68
9#605261

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1FE
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFFC
Light backgroundsTable row hoverSkeleton loading
200
F7C3
#F7C3F9
Secondary backgroundsInput backgroundsDividers
300
F194
#F194F4
BordersInactive statesPlaceholder text
400
EA5D
#EA5DEF
Disabled statesSecondary iconsMuted text
500
E42E
#E42EEA
Primary brand colorCTAsActive elementsLinks
600
C614
#C614CC
Hover statesFocus ringsPrimary buttons hover
700
9E10
#9E10A2
Active/pressed statesDark mode accentsSecondary text
800
710B
#710B74
Text on light backgroundsHeadingsStrong borders
900
4807
#48074A
Primary textHigh emphasis contentDark headings
950
2D05
#2D052E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1FE;
  --purple-100: #FBDFFC;
  --purple-200: #F7C3F9;
  --purple-300: #F194F4;
  --purple-400: #EA5DEF;
  --purple-500: #E42EEA;
  --purple-600: #C614CC;
  --purple-700: #9E10A2;
  --purple-800: #710B74;
  --purple-900: #48074A;
  --purple-950: #2D052E;
}
Generate More ShadesCreate PaletteConvert Color