Salmon

#FC4F75

Red

Color Codes

All color formats for development

HEX
#FC4F75
RGB
rgb(252, 79, 117)
HSL
hsl(347, 97%, 65%)
OKLCH
oklch(0.677 0.209 11.9)
CMYK
cmyk(0%, 69%, 54%, 1%)

Accessibility

WCAG contrast compliance

On White Background

3.22:1

AA AAA

On Black Background

6.51: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#FC2F5B
2#FB0E41
3#E50334
4#C4032D
5#A30225
6#83021E
7#620116
8#41010F
9#210007

Tints

Lighter variations

1#FD6183
2#FD7290
3#FD849E
4#FD96AC
5#FEA7BA
6#FEB9C8
7#FECAD6
8#FEDCE3
9#FFEDF1

Tones

Muted variations

1#F4587A
2#EB607F
3#E26983
4#DA7288
5#D17A8D
6#C88392
7#C08C97
8#B7949C
9#AE9DA1

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 {
  --salmon-50: #FFF0F3;
  --salmon-100: #FEDCE3;
  --salmon-200: #FEBECC;
  --salmon-300: #FD8BA4;
  --salmon-400: #FC4F75;
  --salmon-500: #FC1D4D;
  --salmon-600: #DD0333;
  --salmon-700: #B00328;
  --salmon-800: #7E021D;
  --salmon-900: #500112;
  --salmon-950: #32010B;
}
Generate More ShadesCreate PaletteConvert Color