Pink

#FEBECC

Red

Color Codes

All color formats for development

HEX
#FEBECC
RGB
rgb(254, 190, 204)
HSL
hsl(347, 97%, 87%)
OKLCH
oklch(0.863 0.076 4.3)
CMYK
cmyk(0%, 25%, 20%, 0%)

Accessibility

WCAG contrast compliance

On White Background

1.56:1

AA AAA

On Black Background

13.45:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF0
100
#FEDC
200
#FEBE
300
#FD8B
400
#FC4F
500
#FC1D
600
#DD03
700
#B003
800
#7E02
900
#5001
950
#3201

Shades

Darker variations

1#FD92A9
2#FD6687
3#FC3B64
4#FB0F42
5#DB0332
6#AF0328
7#83021E
8#570114
9#2C010A

Tints

Lighter variations

1#FEC4D1
2#FECBD6
3#FED1DB
4#FED8E0
5#FFDEE5
6#FFE5EA
7#FFEBF0
8#FFF2F5
9#FFF8FA

Tones

Muted variations

1#FBC1CD
2#F8C4CF
3#F4C7D1
4#F1CBD3
5#EECED5
6#EBD1D7
7#E7D4D8
8#E4D7DA
9#E1DBDC

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0F3
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCE3
Light backgroundsTable row hoverSkeleton loading
200
FEBE
#FEBECC
Secondary backgroundsInput backgroundsDividers
300
FD8B
#FD8BA4
BordersInactive statesPlaceholder text
400
FC4F
#FC4F75
Disabled statesSecondary iconsMuted text
500
FC1D
#FC1D4D
Primary brand colorCTAsActive elementsLinks
600
DD03
#DD0333
Hover statesFocus ringsPrimary buttons hover
700
B003
#B00328
Active/pressed statesDark mode accentsSecondary text
800
7E02
#7E021D
Text on light backgroundsHeadingsStrong borders
900
5001
#500112
Primary textHigh emphasis contentDark headings
950
3201
#32010B
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --pink-50: #FFF0F3;
  --pink-100: #FEDCE3;
  --pink-200: #FEBECC;
  --pink-300: #FD8BA4;
  --pink-400: #FC4F75;
  --pink-500: #FC1D4D;
  --pink-600: #DD0333;
  --pink-700: #B00328;
  --pink-800: #7E021D;
  --pink-900: #500112;
  --pink-950: #32010B;
}
Generate More ShadesCreate PaletteConvert Color