Salmon

#E96E63

Red

Color Codes

All color formats for development

HEX
#E96E63
RGB
rgb(233, 110, 99)
HSL
hsl(5, 75%, 65%)
OKLCH
oklch(0.683 0.155 27.1)
CMYK
cmyk(0%, 53%, 58%, 9%)

Accessibility

WCAG contrast compliance

On White Background

3.05:1

AA AAA

On Black Background

6.88:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF3
100
#FBE2
200
#F7C9
300
#F0A0
400
#E96E
500
#E245
600
#C42A
700
#9C21
800
#7018
900
#470F
950
#2D0A

Shades

Darker variations

1#E55346
2#E03829
3#CB2C1D
4#AE2519
5#911F15
6#741911
7#57130C
8#3A0C08
9#1D0604

Tints

Lighter variations

1#EB7C72
2#ED8B82
3#EF9992
4#F2A8A1
5#F4B6B1
6#F6C5C1
7#F8D3D0
8#FBE2E0
9#FDF0EF

Tones

Muted variations

1#E2746A
2#DB7970
3#D57F77
4#CE847E
5#C78A84
6#C18F8B
7#BA9592
8#B39B98
9#ACA09F

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
F0A0
#F0A098
BordersInactive statesPlaceholder text
400
E96E
#E96E63
Disabled statesSecondary iconsMuted text
500
E245
#E24536
Primary brand colorCTAsActive elementsLinks
600
C42A
#C42A1C
Hover statesFocus ringsPrimary buttons hover
700
9C21
#9C2116
Active/pressed statesDark mode accentsSecondary text
800
7018
#701810
Text on light backgroundsHeadingsStrong borders
900
470F
#470F0A
Primary textHigh emphasis contentDark headings
950
2D0A
#2D0A06
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: #F0A098;
  --salmon-400: #E96E63;
  --salmon-500: #E24536;
  --salmon-600: #C42A1C;
  --salmon-700: #9C2116;
  --salmon-800: #701810;
  --salmon-900: #470F0A;
  --salmon-950: #2D0A06;
}
Generate More ShadesCreate PaletteConvert Color