Salmon

#EA7A61

Red

Color Codes

All color formats for development

HEX
#EA7A61
RGB
rgb(234, 122, 97)
HSL
hsl(11, 77%, 65%)
OKLCH
oklch(0.701 0.144 33.8)
CMYK
cmyk(0%, 48%, 59%, 8%)

Accessibility

WCAG contrast compliance

On White Background

2.82:1

AA AAA

On Black Background

7.45:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF4
100
#FBE4
200
#F7CE
300
#F2A8
400
#EA7A
500
#E554
600
#C739
700
#9E2E
800
#7121
900
#4815
950
#2D0D

Shades

Darker variations

1#E76244
2#E34926
3#CD3B1B
4#B03317
5#932A13
6#75220F
7#58190B
8#3B1108
9#1D0804

Tints

Lighter variations

1#ED8871
2#EF9581
3#F1A290
4#F3AFA0
5#F5BDB0
6#F7CAC0
7#F9D7D0
8#FBE4DF
9#FDF2EF

Tones

Muted variations

1#E47F68
2#DD836F
3#D68776
4#CF8C7D
5#C89083
6#C1948A
7#BA9991
8#B39D98
9#ADA19F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF4
#FDF4F1
BackgroundsSubtle highlightsCard backgrounds
100
FBE4
#FBE4DF
Light backgroundsTable row hoverSkeleton loading
200
F7CE
#F7CEC4
Secondary backgroundsInput backgroundsDividers
300
F2A8
#F2A897
BordersInactive statesPlaceholder text
400
EA7A
#EA7A61
Disabled statesSecondary iconsMuted text
500
E554
#E55434
Primary brand colorCTAsActive elementsLinks
600
C739
#C7391A
Hover statesFocus ringsPrimary buttons hover
700
9E2E
#9E2E15
Active/pressed statesDark mode accentsSecondary text
800
7121
#71210F
Text on light backgroundsHeadingsStrong borders
900
4815
#481509
Primary textHigh emphasis contentDark headings
950
2D0D
#2D0D06
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FDF4F1;
  --salmon-100: #FBE4DF;
  --salmon-200: #F7CEC4;
  --salmon-300: #F2A897;
  --salmon-400: #EA7A61;
  --salmon-500: #E55434;
  --salmon-600: #C7391A;
  --salmon-700: #9E2E15;
  --salmon-800: #71210F;
  --salmon-900: #481509;
  --salmon-950: #2D0D06;
}
Generate More ShadesCreate PaletteConvert Color