Purple

#B015CB

Pink

Color Codes

All color formats for development

HEX
#B015CB
RGB
rgb(176, 21, 203)
HSL
hsl(291, 81%, 44%)
OKLCH
oklch(0.555 0.256 320.5)
CMYK
cmyk(13%, 90%, 0%, 20%)

Accessibility

WCAG contrast compliance

On White Background

5.50:1

AA AAA

On Black Background

3.82:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FCF1
100
#F7DF
200
#F1C3
300
#E695
400
#D85D
500
#CD2F
600
#B015
700
#8C11
800
#640C
900
#4008
950
#2805

Shades

Darker variations

1#9E13B7
2#8D11A2
3#7B0F8E
4#690D7A
5#580B66
6#460951
7#35063D
8#230429
9#120214

Tints

Lighter variations

1#C618E5
2#CE30E9
3#D44AEC
4#DA64EF
5#E07EF1
6#E698F4
7#ECB1F7
8#F3CBFA
9#F9E5FC

Tones

Muted variations

1#A91EC2
2#A327B9
3#9D31B0
4#963AA7
5#90439E
6#8A4C95
7#83558B
8#7D5E82
9#776779

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FCF1
#FCF1FE
BackgroundsSubtle highlightsCard backgrounds
100
F7DF
#F7DFFC
Light backgroundsTable row hoverSkeleton loading
200
F1C3
#F1C3F9
Secondary backgroundsInput backgroundsDividers
300
E695
#E695F4
BordersInactive statesPlaceholder text
400
D85D
#D85DEE
Disabled statesSecondary iconsMuted text
500
CD2F
#CD2FE9
Primary brand colorCTAsActive elementsLinks
600
B015
#B015CB
Hover statesFocus ringsPrimary buttons hover
700
8C11
#8C11A2
Active/pressed statesDark mode accentsSecondary text
800
640C
#640C73
Text on light backgroundsHeadingsStrong borders
900
4008
#40084A
Primary textHigh emphasis contentDark headings
950
2805
#28052E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FCF1FE;
  --purple-100: #F7DFFC;
  --purple-200: #F1C3F9;
  --purple-300: #E695F4;
  --purple-400: #D85DEE;
  --purple-500: #CD2FE9;
  --purple-600: #B015CB;
  --purple-700: #8C11A2;
  --purple-800: #640C73;
  --purple-900: #40084A;
  --purple-950: #28052E;
}
Generate More ShadesCreate PaletteConvert Color