Purple

#B1029F

Pink

Color Codes

All color formats for development

HEX
#B1029F
RGB
rgb(177, 2, 159)
HSL
hsl(306, 98%, 35%)
OKLCH
oklch(0.523 0.233 334)
CMYK
cmyk(0%, 99%, 10%, 31%)

Accessibility

WCAG contrast compliance

On White Background

6.22:1

AA AAA

On Black Background

3.38: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#9F028F
2#8D017F
3#7C016F
4#6A0160
5#580150
6#470140
7#350130
8#230020
9#120010

Tints

Lighter variations

1#D202BD
2#F202DA
3#FD19E6
4#FD3AEA
5#FD5BED
6#FE7CF1
7#FE9DF4
8#FEBDF8
9#FFDEFB

Tones

Muted variations

1#A80B98
2#9F1391
3#961C8A
4#8E2583
5#852E7C
6#7C3675
7#733F6E
8#6B4867
9#625160

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0FD
BackgroundsSubtle highlightsCard backgrounds
100
FFDC
#FFDCFB
Light backgroundsTable row hoverSkeleton loading
200
FEBD
#FEBDF8
Secondary backgroundsInput backgroundsDividers
300
FE8B
#FE8BF2
BordersInactive statesPlaceholder text
400
FD4E
#FD4EEC
Disabled statesSecondary iconsMuted text
500
FD1C
#FD1CE6
Primary brand colorCTAsActive elementsLinks
600
DE02
#DE02C8
Hover statesFocus ringsPrimary buttons hover
700
B102
#B1029F
Active/pressed statesDark mode accentsSecondary text
800
7E01
#7E0172
Text on light backgroundsHeadingsStrong borders
900
5101
#510149
Primary textHigh emphasis contentDark headings
950
3201
#32012D
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0FD;
  --purple-100: #FFDCFB;
  --purple-200: #FEBDF8;
  --purple-300: #FE8BF2;
  --purple-400: #FD4EEC;
  --purple-500: #FD1CE6;
  --purple-600: #DE02C8;
  --purple-700: #B1029F;
  --purple-800: #7E0172;
  --purple-900: #510149;
  --purple-950: #32012D;
}
Generate More ShadesCreate PaletteConvert Color