Salmon

#EA6D62

Red

Color Codes

All color formats for development

HEX
#EA6D62
RGB
rgb(234, 109, 98)
HSL
hsl(5, 76%, 65%)
OKLCH
oklch(0.682 0.157 27.1)
CMYK
cmyk(0%, 53%, 58%, 8%)

Accessibility

WCAG contrast compliance

On White Background

3.06:1

AA AAA

On Black Background

6.86:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF3
100
#FBE2
200
#F7C9
300
#F19F
400
#EA6D
500
#E344
600
#C529
700
#9D21
800
#7017
900
#480F
950
#2D09

Shades

Darker variations

1#E65245
2#E23728
3#CC2B1C
4#AF2418
5#921E14
6#751810
7#58120C
8#3A0C08
9#1D0604

Tints

Lighter variations

1#EC7C72
2#EE8A81
3#F09991
4#F2A8A1
5#F4B6B0
6#F6C5C0
7#F9D3D0
8#FBE2E0
9#FDF0EF

Tones

Muted variations

1#E37369
2#DC796F
3#D57E76
4#CE847D
5#C88984
6#C18F8B
7#BA9591
8#B39A98
9#ADA09F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF3
#FDF3F2
BackgroundsSubtle highlightsCard backgrounds
100
FBE2
#FBE2E0
Light backgroundsTable row hoverSkeleton loading
200
F7C9
#F7C9C5
Secondary backgroundsInput backgroundsDividers
300
F19F
#F19F98
BordersInactive statesPlaceholder text
400
EA6D
#EA6D62
Disabled statesSecondary iconsMuted text
500
E344
#E34435
Primary brand colorCTAsActive elementsLinks
600
C529
#C5291B
Hover statesFocus ringsPrimary buttons hover
700
9D21
#9D2115
Active/pressed statesDark mode accentsSecondary text
800
7017
#70170F
Text on light backgroundsHeadingsStrong borders
900
480F
#480F0A
Primary textHigh emphasis contentDark headings
950
2D09
#2D0906
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FDF3F2;
  --salmon-100: #FBE2E0;
  --salmon-200: #F7C9C5;
  --salmon-300: #F19F98;
  --salmon-400: #EA6D62;
  --salmon-500: #E34435;
  --salmon-600: #C5291B;
  --salmon-700: #9D2115;
  --salmon-800: #70170F;
  --salmon-900: #480F0A;
  --salmon-950: #2D0906;
}
Generate More ShadesCreate PaletteConvert Color