Pink

#FEBECD

Red

Color Codes

All color formats for development

HEX
#FEBECD
RGB
rgb(254, 190, 205)
HSL
hsl(346, 97%, 87%)
OKLCH
oklch(0.864 0.076 3.3)
CMYK
cmyk(0%, 25%, 19%, 0%)

Accessibility

WCAG contrast compliance

On White Background

1.56:1

AA AAA

On Black Background

13.46: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#FD92AB
2#FD6689
3#FC3B68
4#FB0F46
5#DB0336
6#AF032B
7#830220
8#570115
9#2C010B

Tints

Lighter variations

1#FEC4D2
2#FECBD7
3#FED1DC
4#FED8E1
5#FFDEE6
6#FFE5EB
7#FFEBF0
8#FFF2F5
9#FFF8FA

Tones

Muted variations

1#FBC1CE
2#F8C4D0
3#F4C7D2
4#F1CBD4
5#EECED5
6#EBD1D7
7#E7D4D9
8#E4D7DA
9#E1DBDC

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0F3
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCE4
Light backgroundsTable row hoverSkeleton loading
200
FEBE
#FEBECD
Secondary backgroundsInput backgroundsDividers
300
FD8B
#FD8BA6
BordersInactive statesPlaceholder text
400
FC4F
#FC4F78
Disabled statesSecondary iconsMuted text
500
FC1D
#FC1D51
Primary brand colorCTAsActive elementsLinks
600
DD03
#DD0336
Hover statesFocus ringsPrimary buttons hover
700
B003
#B0032B
Active/pressed statesDark mode accentsSecondary text
800
7E02
#7E021F
Text on light backgroundsHeadingsStrong borders
900
5001
#500114
Primary textHigh emphasis contentDark headings
950
3201
#32010C
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --pink-50: #FFF0F3;
  --pink-100: #FEDCE4;
  --pink-200: #FEBECD;
  --pink-300: #FD8BA6;
  --pink-400: #FC4F78;
  --pink-500: #FC1D51;
  --pink-600: #DD0336;
  --pink-700: #B0032B;
  --pink-800: #7E021F;
  --pink-900: #500114;
  --pink-950: #32010C;
}
Generate More ShadesCreate PaletteConvert Color