Purple

#B0038D

Pink

Color Codes

All color formats for development

HEX
#B0038D
RGB
rgb(176, 3, 141)
HSL
hsl(312, 97%, 35%)
OKLCH
oklch(0.512 0.221 340)
CMYK
cmyk(0%, 98%, 20%, 31%)

Accessibility

WCAG contrast compliance

On White Background

6.47:1

AA AAA

On Black Background

3.24: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#9E027F
2#8D0271
3#7B0263
4#690255
5#580147
6#460138
7#35012A
8#23011C
9#12000E

Tints

Lighter variations

1#D003A7
2#F104C2
3#FC1ACF
4#FC3BD5
5#FD5CDC
6#FD7CE3
7#FE9DEA
8#FEBEF1
9#FFDEF8

Tones

Muted variations

1#A70B88
2#9F1483
3#961D7E
4#8D2578
5#852E73
6#7C376E
7#733F69
8#6B4864
9#62515E

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0FC
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCF8
Light backgroundsTable row hoverSkeleton loading
200
FEBE
#FEBEF1
Secondary backgroundsInput backgroundsDividers
300
FD8B
#FD8BE6
BordersInactive statesPlaceholder text
400
FC4F
#FC4FDA
Disabled statesSecondary iconsMuted text
500
FC1D
#FC1DCF
Primary brand colorCTAsActive elementsLinks
600
DD03
#DD03B2
Hover statesFocus ringsPrimary buttons hover
700
B003
#B0038D
Active/pressed statesDark mode accentsSecondary text
800
7E02
#7E0265
Text on light backgroundsHeadingsStrong borders
900
5001
#500141
Primary textHigh emphasis contentDark headings
950
3201
#320128
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0FC;
  --purple-100: #FEDCF8;
  --purple-200: #FEBEF1;
  --purple-300: #FD8BE6;
  --purple-400: #FC4FDA;
  --purple-500: #FC1DCF;
  --purple-600: #DD03B2;
  --purple-700: #B0038D;
  --purple-800: #7E0265;
  --purple-900: #500141;
  --purple-950: #320128;
}
Generate More ShadesCreate PaletteConvert Color