Salmon

#FC9B8D

Red

Color Codes

All color formats for development

HEX
#FC9B8D
RGB
rgb(252, 155, 141)
HSL
hsl(8, 95%, 77%)
OKLCH
oklch(0.785 0.119 28.9)
CMYK
cmyk(0%, 38%, 44%, 1%)

Accessibility

WCAG contrast compliance

On White Background

2.06:1

AA AAA

On Black Background

10.21:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF2
100
#FEE1
200
#FDC7
300
#FC9B
400
#FB68
500
#F93C
600
#DB22
700
#AE1B
800
#7C13
900
#500C
950
#3208

Shades

Darker variations

1#FB7A66
2#FA5940
3#F9381A
4#E62406
5#BF1E05
6#991804
7#731203
8#4D0C02
9#260601

Tints

Lighter variations

1#FCA598
2#FDAFA4
3#FDB9AF
4#FDC3BA
5#FECDC6
6#FED7D1
7#FEE1DD
8#FEEBE8
9#FFF5F4

Tones

Muted variations

1#F6A092
2#F1A498
3#EBA89D
4#E6ACA3
5#E0B0A8
6#DBB4AE
7#D5B8B4
8#CFBCB9
9#CAC0BF

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF2
#FFF2F0
BackgroundsSubtle highlightsCard backgrounds
100
FEE1
#FEE1DC
Light backgroundsTable row hoverSkeleton loading
200
FDC7
#FDC7BE
Secondary backgroundsInput backgroundsDividers
300
FC9B
#FC9B8D
BordersInactive statesPlaceholder text
400
FB68
#FB6851
Disabled statesSecondary iconsMuted text
500
F93C
#F93C1F
Primary brand colorCTAsActive elementsLinks
600
DB22
#DB2206
Hover statesFocus ringsPrimary buttons hover
700
AE1B
#AE1B04
Active/pressed statesDark mode accentsSecondary text
800
7C13
#7C1303
Text on light backgroundsHeadingsStrong borders
900
500C
#500C02
Primary textHigh emphasis contentDark headings
950
3208
#320801
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FFF2F0;
  --salmon-100: #FEE1DC;
  --salmon-200: #FDC7BE;
  --salmon-300: #FC9B8D;
  --salmon-400: #FB6851;
  --salmon-500: #F93C1F;
  --salmon-600: #DB2206;
  --salmon-700: #AE1B04;
  --salmon-800: #7C1303;
  --salmon-900: #500C02;
  --salmon-950: #320801;
}
Generate More ShadesCreate PaletteConvert Color