Pink

#FEC5BE

Red

Color Codes

All color formats for development

HEX
#FEC5BE
RGB
rgb(254, 197, 190)
HSL
hsl(7, 97%, 87%)
OKLCH
oklch(0.872 0.066 26.5)
CMYK
cmyk(0%, 22%, 25%, 0%)

Accessibility

WCAG contrast compliance

On White Background

1.51:1

AA AAA

On Black Background

13.94:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF2
100
#FEE0
200
#FEC5
300
#FD99
400
#FC63
500
#FC37
600
#DD1D
700
#B017
800
#7E10
900
#500A
950
#3207

Shades

Darker variations

1#FD9F92
2#FD7866
3#FC513B
4#FB2A0F
5#DB1C03
6#AF1703
7#831102
8#570B01
9#2C0601

Tints

Lighter variations

1#FECBC4
2#FED1CB
3#FED7D1
4#FEDCD8
5#FFE2DE
6#FFE8E5
7#FFEEEB
8#FFF3F2
9#FFF9F8

Tones

Muted variations

1#FBC8C1
2#F8CAC4
3#F4CDC7
4#F1CFCB
5#EED2CE
6#EBD4D1
7#E7D6D4
8#E4D9D7
9#E1DBDB

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF2
#FFF2F0
BackgroundsSubtle highlightsCard backgrounds
100
FEE0
#FEE0DC
Light backgroundsTable row hoverSkeleton loading
200
FEC5
#FEC5BE
Secondary backgroundsInput backgroundsDividers
300
FD99
#FD998B
BordersInactive statesPlaceholder text
400
FC63
#FC634F
Disabled statesSecondary iconsMuted text
500
FC37
#FC371D
Primary brand colorCTAsActive elementsLinks
600
DD1D
#DD1D03
Hover statesFocus ringsPrimary buttons hover
700
B017
#B01703
Active/pressed statesDark mode accentsSecondary text
800
7E10
#7E1002
Text on light backgroundsHeadingsStrong borders
900
500A
#500A01
Primary textHigh emphasis contentDark headings
950
3207
#320701
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --pink-50: #FFF2F0;
  --pink-100: #FEE0DC;
  --pink-200: #FEC5BE;
  --pink-300: #FD998B;
  --pink-400: #FC634F;
  --pink-500: #FC371D;
  --pink-600: #DD1D03;
  --pink-700: #B01703;
  --pink-800: #7E1002;
  --pink-900: #500A01;
  --pink-950: #320701;
}
Generate More ShadesCreate PaletteConvert Color