Purple

#B1028B

Pink

Color Codes

All color formats for development

HEX
#B1028B
RGB
rgb(177, 2, 139)
HSL
hsl(313, 98%, 35%)
OKLCH
oklch(0.512 0.221 341)
CMYK
cmyk(0%, 99%, 21%, 31%)

Accessibility

WCAG contrast compliance

On White Background

6.46:1

AA AAA

On Black Background

3.25:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF0
100
#FFDC
200
#FEBD
300
#FE8B
400
#FD4E
500
#FD1C
600
#DE02
700
#B102
800
#7E01
900
#5101
950
#3201

Shades

Darker variations

1#9F027D
2#8D016F
3#7C0161
4#6A0153
5#580145
6#470138
7#35012A
8#23001C
9#12000E

Tints

Lighter variations

1#D202A5
2#F202BE
3#FD19CB
4#FD3AD3
5#FD5BDA
6#FE7CE2
7#FE9DE9
8#FEBDF0
9#FFDEF8

Tones

Muted variations

1#A80B86
2#9F1381
3#961C7C
4#8E2577
5#852E72
6#7C366D
7#733F68
8#6B4863
9#62515E

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0FC
BackgroundsSubtle highlightsCard backgrounds
100
FFDC
#FFDCF7
Light backgroundsTable row hoverSkeleton loading
200
FEBD
#FEBDF0
Secondary backgroundsInput backgroundsDividers
300
FE8B
#FE8BE5
BordersInactive statesPlaceholder text
400
FD4E
#FD4ED7
Disabled statesSecondary iconsMuted text
500
FD1C
#FD1CCC
Primary brand colorCTAsActive elementsLinks
600
DE02
#DE02AF
Hover statesFocus ringsPrimary buttons hover
700
B102
#B1028B
Active/pressed statesDark mode accentsSecondary text
800
7E01
#7E0163
Text on light backgroundsHeadingsStrong borders
900
5101
#51013F
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: #FFDCF7;
  --purple-200: #FEBDF0;
  --purple-300: #FE8BE5;
  --purple-400: #FD4ED7;
  --purple-500: #FD1CCC;
  --purple-600: #DE02AF;
  --purple-700: #B1028B;
  --purple-800: #7E0163;
  --purple-900: #51013F;
  --purple-950: #320128;
}
Generate More ShadesCreate PaletteConvert Color