Purple

#B0039F

Pink

Color Codes

All color formats for development

HEX
#B0039F
RGB
rgb(176, 3, 159)
HSL
hsl(306, 97%, 35%)
OKLCH
oklch(0.522 0.232 333.7)
CMYK
cmyk(0%, 98%, 10%, 31%)

Accessibility

WCAG contrast compliance

On White Background

6.25:1

AA AAA

On Black Background

3.36: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#9E028F
2#8D027F
3#7B026F
4#69025F
5#58014F
6#46013F
7#350130
8#230120
9#120010

Tints

Lighter variations

1#D003BC
2#F104D9
3#FC1AE5
4#FC3BE9
5#FD5CEC
6#FD7CF0
7#FE9DF4
8#FEBEF8
9#FFDEFB

Tones

Muted variations

1#A70B98
2#9F1491
3#961D8A
4#8D2583
5#852E7C
6#7C3775
7#733F6E
8#6B4867
9#625160

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0FD
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCFB
Light backgroundsTable row hoverSkeleton loading
200
FEBE
#FEBEF8
Secondary backgroundsInput backgroundsDividers
300
FD8B
#FD8BF2
BordersInactive statesPlaceholder text
400
FC4F
#FC4FEB
Disabled statesSecondary iconsMuted text
500
FC1D
#FC1DE5
Primary brand colorCTAsActive elementsLinks
600
DD03
#DD03C7
Hover statesFocus ringsPrimary buttons hover
700
B003
#B0039F
Active/pressed statesDark mode accentsSecondary text
800
7E02
#7E0271
Text on light backgroundsHeadingsStrong borders
900
5001
#500148
Primary textHigh emphasis contentDark headings
950
3201
#32012D
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0FD;
  --purple-100: #FEDCFB;
  --purple-200: #FEBEF8;
  --purple-300: #FD8BF2;
  --purple-400: #FC4FEB;
  --purple-500: #FC1DE5;
  --purple-600: #DD03C7;
  --purple-700: #B0039F;
  --purple-800: #7E0271;
  --purple-900: #500148;
  --purple-950: #32012D;
}
Generate More ShadesCreate PaletteConvert Color