Pink

#FBC1DD

Pink

Color Codes

All color formats for development

HEX
#FBC1DD
RGB
rgb(251, 193, 221)
HSL
hsl(331, 88%, 87%)
OKLCH
oklch(0.871 0.075 348.2)
CMYK
cmyk(0%, 23%, 12%, 2%)

Accessibility

WCAG contrast compliance

On White Background

1.52:1

AA AAA

On Black Background

13.77:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF1
100
#FDDD
200
#FBC1
300
#F891
400
#F457
500
#F127
600
#D30D
700
#A80B
800
#7808
900
#4D05
950
#3003

Shades

Darker variations

1#F897C6
2#F66DAF
3#F34498
4#F01A82
5#D10D6C
6#A70B56
7#7D0841
8#53052B
9#2A0316

Tints

Lighter variations

1#FBC7E0
2#FCCDE4
3#FCD3E7
4#FDDAEB
5#FDE0EE
6#FDE6F1
7#FEECF5
8#FEF3F8
9#FFF9FC

Tones

Muted variations

1#F8C4DD
2#F5C7DD
3#F2C9DD
4#EFCCDD
5#ECCFDD
6#EAD2DD
7#E7D5DE
8#E4D8DE
9#E1DBDE

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1F7
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDED
Light backgroundsTable row hoverSkeleton loading
200
FBC1
#FBC1DD
Secondary backgroundsInput backgroundsDividers
300
F891
#F891C3
BordersInactive statesPlaceholder text
400
F457
#F457A3
Disabled statesSecondary iconsMuted text
500
F127
#F12789
Primary brand colorCTAsActive elementsLinks
600
D30D
#D30D6D
Hover statesFocus ringsPrimary buttons hover
700
A80B
#A80B57
Active/pressed statesDark mode accentsSecondary text
800
7808
#78083E
Text on light backgroundsHeadingsStrong borders
900
4D05
#4D0528
Primary textHigh emphasis contentDark headings
950
3003
#300319
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --pink-50: #FEF1F7;
  --pink-100: #FDDDED;
  --pink-200: #FBC1DD;
  --pink-300: #F891C3;
  --pink-400: #F457A3;
  --pink-500: #F12789;
  --pink-600: #D30D6D;
  --pink-700: #A80B57;
  --pink-800: #78083E;
  --pink-900: #4D0528;
  --pink-950: #300319;
}
Generate More ShadesCreate PaletteConvert Color