Salmon

#FC8D94

Red

Color Codes

All color formats for development

HEX
#FC8D94
RGB
rgb(252, 141, 148)
HSL
hsl(356, 95%, 77%)
OKLCH
oklch(0.765 0.134 16.7)
CMYK
cmyk(0%, 44%, 41%, 1%)

Accessibility

WCAG contrast compliance

On White Background

2.24:1

AA AAA

On Black Background

9.38:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF0
100
#FEDC
200
#FDBE
300
#FC8D
400
#FB51
500
#F91F
600
#DB06
700
#AE04
800
#7C03
900
#5002
950
#3201

Shades

Darker variations

1#FB6670
2#FA404C
3#F91A29
4#E60615
5#BF0511
6#99040E
7#73030A
8#4D0207
9#260103

Tints

Lighter variations

1#FC989F
2#FDA4A9
3#FDAFB4
4#FDBABF
5#FEC6CA
6#FED1D4
7#FEDDDF
8#FEE8EA
9#FFF4F4

Tones

Muted variations

1#F69299
2#F1989E
3#EB9DA3
4#E6A3A7
5#E0A8AC
6#DBAEB1
7#D5B4B6
8#CFB9BB
9#CABFC0

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0F1
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCDE
Light backgroundsTable row hoverSkeleton loading
200
FDBE
#FDBEC3
Secondary backgroundsInput backgroundsDividers
300
FC8D
#FC8D94
BordersInactive statesPlaceholder text
400
FB51
#FB515C
Disabled statesSecondary iconsMuted text
500
F91F
#F91F2E
Primary brand colorCTAsActive elementsLinks
600
DB06
#DB0614
Hover statesFocus ringsPrimary buttons hover
700
AE04
#AE0410
Active/pressed statesDark mode accentsSecondary text
800
7C03
#7C030B
Text on light backgroundsHeadingsStrong borders
900
5002
#500207
Primary textHigh emphasis contentDark headings
950
3201
#320105
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FFF0F1;
  --salmon-100: #FEDCDE;
  --salmon-200: #FDBEC3;
  --salmon-300: #FC8D94;
  --salmon-400: #FB515C;
  --salmon-500: #F91F2E;
  --salmon-600: #DB0614;
  --salmon-700: #AE0410;
  --salmon-800: #7C030B;
  --salmon-900: #500207;
  --salmon-950: #320105;
}
Generate More ShadesCreate PaletteConvert Color