Purple

#B00368

Pink

Color Codes

All color formats for development

HEX
#B00368
RGB
rgb(176, 3, 104)
HSL
hsl(325, 97%, 35%)
OKLCH
oklch(0.496 0.202 354.8)
CMYK
cmyk(0%, 98%, 41%, 31%)

Accessibility

WCAG contrast compliance

On White Background

6.87:1

AA AAA

On Black Background

3.06:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF0
100
#FEDC
200
#FEBE
300
#FD8B
400
#FC4F
500
#FC1D
600
#DD03
700
#B003
800
#7E02
900
#5001
950
#3201

Shades

Darker variations

1#9E025D
2#8D0253
3#7B0249
4#69023E
5#580134
6#460129
7#35011F
8#230115
9#12000A

Tints

Lighter variations

1#D0037B
2#F1048E
3#FC1A9E
4#FC3BAC
5#FD5CBA
6#FD7CC7
7#FE9DD5
8#FEBEE3
9#FFDEF1

Tones

Muted variations

1#A70B66
2#9F1465
3#961D63
4#8D2562
5#852E60
6#7C375F
7#733F5E
8#6B485C
9#62515B

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0F9
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCF0
Light backgroundsTable row hoverSkeleton loading
200
FEBE
#FEBEE3
Secondary backgroundsInput backgroundsDividers
300
FD8B
#FD8BCE
BordersInactive statesPlaceholder text
400
FC4F
#FC4FB4
Disabled statesSecondary iconsMuted text
500
FC1D
#FC1D9F
Primary brand colorCTAsActive elementsLinks
600
DD03
#DD0382
Hover statesFocus ringsPrimary buttons hover
700
B003
#B00368
Active/pressed statesDark mode accentsSecondary text
800
7E02
#7E024A
Text on light backgroundsHeadingsStrong borders
900
5001
#50012F
Primary textHigh emphasis contentDark headings
950
3201
#32011E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0F9;
  --purple-100: #FEDCF0;
  --purple-200: #FEBEE3;
  --purple-300: #FD8BCE;
  --purple-400: #FC4FB4;
  --purple-500: #FC1D9F;
  --purple-600: #DD0382;
  --purple-700: #B00368;
  --purple-800: #7E024A;
  --purple-900: #50012F;
  --purple-950: #32011E;
}
Generate More ShadesCreate PaletteConvert Color