Purple

#9C1691

Pink

Color Codes

All color formats for development

HEX
#9C1691
RGB
rgb(156, 22, 145)
HSL
hsl(305, 75%, 35%)
OKLCH
oklch(0.487 0.206 332.2)
CMYK
cmyk(0%, 86%, 7%, 39%)

Accessibility

WCAG contrast compliance

On White Background

7.15:1

AA AAA

On Black Background

2.94:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF2
100
#FBE0
200
#F7C5
300
#F098
400
#E963
500
#E236
600
#C41C
700
#9C16
800
#7010
900
#470A
950
#2D06

Shades

Darker variations

1#8D1483
2#7D1274
3#6D1066
4#5E0D57
5#4E0B49
6#3E093A
7#2F072C
8#1F041D
9#10020F

Tints

Lighter variations

1#B91AAC
2#D61FC7
3#E234D3
4#E651DA
5#EA6EE0
6#EE8BE6
7#F3A8EC
8#F7C5F3
9#FBE2F9

Tones

Muted variations

1#951D8B
2#8F2486
3#882A80
4#81317B
5#7B3875
6#743E70
7#6D456A
8#674C64
9#60535F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2FC
BackgroundsSubtle highlightsCard backgrounds
100
FBE0
#FBE0F8
Light backgroundsTable row hoverSkeleton loading
200
F7C5
#F7C5F3
Secondary backgroundsInput backgroundsDividers
300
F098
#F098E9
BordersInactive statesPlaceholder text
400
E963
#E963DE
Disabled statesSecondary iconsMuted text
500
E236
#E236D4
Primary brand colorCTAsActive elementsLinks
600
C41C
#C41CB6
Hover statesFocus ringsPrimary buttons hover
700
9C16
#9C1691
Active/pressed statesDark mode accentsSecondary text
800
7010
#701068
Text on light backgroundsHeadingsStrong borders
900
470A
#470A42
Primary textHigh emphasis contentDark headings
950
2D06
#2D0629
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF2FC;
  --purple-100: #FBE0F8;
  --purple-200: #F7C5F3;
  --purple-300: #F098E9;
  --purple-400: #E963DE;
  --purple-500: #E236D4;
  --purple-600: #C41CB6;
  --purple-700: #9C1691;
  --purple-800: #701068;
  --purple-900: #470A42;
  --purple-950: #2D0629;
}
Generate More ShadesCreate PaletteConvert Color