Purple

#B00393

Pink

Color Codes

All color formats for development

HEX
#B00393
RGB
rgb(176, 3, 147)
HSL
hsl(310, 97%, 35%)
OKLCH
oklch(0.515 0.225 337.9)
CMYK
cmyk(0%, 98%, 16%, 31%)

Accessibility

WCAG contrast compliance

On White Background

6.40:1

AA AAA

On Black Background

3.28: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#9E0284
2#8D0276
3#7B0267
4#690258
5#580149
6#46013B
7#35012C
8#23011D
9#12000F

Tints

Lighter variations

1#D003AE
2#F104CA
3#FC1AD6
4#FC3BDC
5#FD5CE2
6#FD7CE8
7#FE9DED
8#FEBEF3
9#FFDEF9

Tones

Muted variations

1#A70B8D
2#9F1487
3#961D82
4#8D257C
5#852E76
6#7C3770
7#733F6B
8#6B4865
9#62515F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0FC
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCF9
Light backgroundsTable row hoverSkeleton loading
200
FEBE
#FEBEF3
Secondary backgroundsInput backgroundsDividers
300
FD8B
#FD8BEA
BordersInactive statesPlaceholder text
400
FC4F
#FC4FDF
Disabled statesSecondary iconsMuted text
500
FC1D
#FC1DD6
Primary brand colorCTAsActive elementsLinks
600
DD03
#DD03B9
Hover statesFocus ringsPrimary buttons hover
700
B003
#B00393
Active/pressed statesDark mode accentsSecondary text
800
7E02
#7E0269
Text on light backgroundsHeadingsStrong borders
900
5001
#500143
Primary textHigh emphasis contentDark headings
950
3201
#32012A
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0FC;
  --purple-100: #FEDCF9;
  --purple-200: #FEBEF3;
  --purple-300: #FD8BEA;
  --purple-400: #FC4FDF;
  --purple-500: #FC1DD6;
  --purple-600: #DD03B9;
  --purple-700: #B00393;
  --purple-800: #7E0269;
  --purple-900: #500143;
  --purple-950: #32012A;
}
Generate More ShadesCreate PaletteConvert Color