Purple

#B30068

Pink

Color Codes

All color formats for development

HEX
#B30068
RGB
rgb(179, 0, 104)
HSL
hsl(325, 100%, 35%)
OKLCH
oklch(0.5 0.205 355.5)
CMYK
cmyk(0%, 100%, 42%, 30%)

Accessibility

WCAG contrast compliance

On White Background

6.74:1

AA AAA

On Black Background

3.12:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF0
100
#FFDB
200
#FFBD
300
#FF8A
400
#FF4D
500
#FF1A
600
#E000
700
#B300
800
#8000
900
#5200
950
#3300

Shades

Darker variations

1#A1005E
2#8F0053
3#7D0049
4#6B003E
5#590034
6#47002A
7#36001F
8#240015
9#12000A

Tints

Lighter variations

1#D4007B
2#F5008F
3#FF179E
4#FF38AC
5#FF59BA
6#FF7AC8
7#FF9CD6
8#FFBDE3
9#FFDEF1

Tones

Muted variations

1#AA0967
2#A11265
3#981B64
4#8F2462
5#862D61
6#7D365F
7#743E5E
8#6B475C
9#62505B

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0F9
BackgroundsSubtle highlightsCard backgrounds
100
FFDB
#FFDBF0
Light backgroundsTable row hoverSkeleton loading
200
FFBD
#FFBDE3
Secondary backgroundsInput backgroundsDividers
300
FF8A
#FF8ACE
BordersInactive statesPlaceholder text
400
FF4D
#FF4DB5
Disabled statesSecondary iconsMuted text
500
FF1A
#FF1A9F
Primary brand colorCTAsActive elementsLinks
600
E000
#E00083
Hover statesFocus ringsPrimary buttons hover
700
B300
#B30068
Active/pressed statesDark mode accentsSecondary text
800
8000
#80004A
Text on light backgroundsHeadingsStrong borders
900
5200
#520030
Primary textHigh emphasis contentDark headings
950
3300
#33001E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0F9;
  --purple-100: #FFDBF0;
  --purple-200: #FFBDE3;
  --purple-300: #FF8ACE;
  --purple-400: #FF4DB5;
  --purple-500: #FF1A9F;
  --purple-600: #E00083;
  --purple-700: #B30068;
  --purple-800: #80004A;
  --purple-900: #520030;
  --purple-950: #33001E;
}
Generate More ShadesCreate PaletteConvert Color