Salmon

#EA7662

Red

Color Codes

All color formats for development

HEX
#EA7662
RGB
rgb(234, 118, 98)
HSL
hsl(9, 76%, 65%)
OKLCH
oklch(0.696 0.148 31.2)
CMYK
cmyk(0%, 50%, 58%, 8%)

Accessibility

WCAG contrast compliance

On White Background

2.89:1

AA AAA

On Black Background

7.27:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF3
100
#FBE4
200
#F7CC
300
#F1A5
400
#EA76
500
#E34F
600
#C535
700
#9D2A
800
#701E
900
#4813
950
#2D0C

Shades

Darker variations

1#E65D45
2#E24328
3#CC361C
4#AF2F18
5#922714
6#751F10
7#58170C
8#3A1008
9#1D0804

Tints

Lighter variations

1#EC8472
2#EE9281
3#F09F91
4#F2ADA1
5#F4BBB0
6#F6C8C0
7#F9D6D0
8#FBE4E0
9#FDF1EF

Tones

Muted variations

1#E37B69
2#DC806F
3#D58576
4#CE897D
5#C88E84
6#C1938B
7#BA9891
8#B39C98
9#ADA19F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF3
#FDF3F2
BackgroundsSubtle highlightsCard backgrounds
100
FBE4
#FBE4E0
Light backgroundsTable row hoverSkeleton loading
200
F7CC
#F7CCC5
Secondary backgroundsInput backgroundsDividers
300
F1A5
#F1A598
BordersInactive statesPlaceholder text
400
EA76
#EA7662
Disabled statesSecondary iconsMuted text
500
E34F
#E34F35
Primary brand colorCTAsActive elementsLinks
600
C535
#C5351B
Hover statesFocus ringsPrimary buttons hover
700
9D2A
#9D2A15
Active/pressed statesDark mode accentsSecondary text
800
701E
#701E0F
Text on light backgroundsHeadingsStrong borders
900
4813
#48130A
Primary textHigh emphasis contentDark headings
950
2D0C
#2D0C06
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FDF3F2;
  --salmon-100: #FBE4E0;
  --salmon-200: #F7CCC5;
  --salmon-300: #F1A598;
  --salmon-400: #EA7662;
  --salmon-500: #E34F35;
  --salmon-600: #C5351B;
  --salmon-700: #9D2A15;
  --salmon-800: #701E0F;
  --salmon-900: #48130A;
  --salmon-950: #2D0C06;
}
Generate More ShadesCreate PaletteConvert Color