Salmon

#FD9B8C

Red

Color Codes

All color formats for development

HEX
#FD9B8C
RGB
rgb(253, 155, 140)
HSL
hsl(8, 97%, 77%)
OKLCH
oklch(0.786 0.12 29.4)
CMYK
cmyk(0%, 39%, 45%, 1%)

Accessibility

WCAG contrast compliance

On White Background

2.05:1

AA AAA

On Black Background

10.24:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF2
100
#FEE0
200
#FEC6
300
#FD9B
400
#FC66
500
#FC3B
600
#DD20
700
#B01A
800
#7E12
900
#500C
950
#3207

Shades

Darker variations

1#FD7965
2#FC573E
3#FB3617
4#E82204
5#C11C03
6#9B1702
7#741102
8#4D0B01
9#270601

Tints

Lighter variations

1#FDA597
2#FEAFA3
3#FEB9AE
4#FEC3BA
5#FECDC5
6#FED7D1
7#FEE1DC
8#FFEBE8
9#FFF5F3

Tones

Muted variations

1#F89F91
2#F2A397
3#ECA79D
4#E6ABA2
5#E1AFA8
6#DBB4AE
7#D5B8B3
8#D0BCB9
9#CAC0BF

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
FEC6
#FEC6BE
Secondary backgroundsInput backgroundsDividers
300
FD9B
#FD9B8B
BordersInactive statesPlaceholder text
400
FC66
#FC664F
Disabled statesSecondary iconsMuted text
500
FC3B
#FC3B1D
Primary brand colorCTAsActive elementsLinks
600
DD20
#DD2003
Hover statesFocus ringsPrimary buttons hover
700
B01A
#B01A03
Active/pressed statesDark mode accentsSecondary text
800
7E12
#7E1202
Text on light backgroundsHeadingsStrong borders
900
500C
#500C01
Primary textHigh emphasis contentDark headings
950
3207
#320701
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FFF2F0;
  --salmon-100: #FEE0DC;
  --salmon-200: #FEC6BE;
  --salmon-300: #FD9B8B;
  --salmon-400: #FC664F;
  --salmon-500: #FC3B1D;
  --salmon-600: #DD2003;
  --salmon-700: #B01A03;
  --salmon-800: #7E1202;
  --salmon-900: #500C01;
  --salmon-950: #320701;
}
Generate More ShadesCreate PaletteConvert Color