Salmon

#FDA28B

Red

Color Codes

All color formats for development

HEX
#FDA28B
RGB
rgb(253, 162, 139)
HSL
hsl(12, 97%, 77%)
OKLCH
oklch(0.798 0.114 34.9)
CMYK
cmyk(0%, 36%, 45%, 1%)

Accessibility

WCAG contrast compliance

On White Background

1.96:1

AA AAA

On Black Background

10.72:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF3
100
#FEE3
200
#FECB
300
#FDA2
400
#FC72
500
#FC49
600
#DD2F
700
#B025
800
#7E1B
900
#5011
950
#320B

Shades

Darker variations

1#FD8365
2#FC643E
3#FB4517
4#E83104
5#C12903
6#9B2102
7#741902
8#4D1001
9#270801

Tints

Lighter variations

1#FDAB97
2#FEB5A3
3#FEBEAE
4#FEC7BA
5#FED1C5
6#FEDAD1
7#FEE3DC
8#FFECE8
9#FFF6F3

Tones

Muted variations

1#F8A691
2#F2A997
3#ECAC9D
4#E6B0A2
5#E1B3A8
6#DBB7AE
7#D5BAB3
8#D0BEB9
9#CAC1BF

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF3
#FFF3F0
BackgroundsSubtle highlightsCard backgrounds
100
FEE3
#FEE3DC
Light backgroundsTable row hoverSkeleton loading
200
FECB
#FECBBE
Secondary backgroundsInput backgroundsDividers
300
FDA2
#FDA28B
BordersInactive statesPlaceholder text
400
FC72
#FC724F
Disabled statesSecondary iconsMuted text
500
FC49
#FC491D
Primary brand colorCTAsActive elementsLinks
600
DD2F
#DD2F03
Hover statesFocus ringsPrimary buttons hover
700
B025
#B02503
Active/pressed statesDark mode accentsSecondary text
800
7E1B
#7E1B02
Text on light backgroundsHeadingsStrong borders
900
5011
#501101
Primary textHigh emphasis contentDark headings
950
320B
#320B01
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FFF3F0;
  --salmon-100: #FEE3DC;
  --salmon-200: #FECBBE;
  --salmon-300: #FDA28B;
  --salmon-400: #FC724F;
  --salmon-500: #FC491D;
  --salmon-600: #DD2F03;
  --salmon-700: #B02503;
  --salmon-800: #7E1B02;
  --salmon-900: #501101;
  --salmon-950: #320B01;
}
Generate More ShadesCreate PaletteConvert Color