Salmon

#E9636E

Red

Color Codes

All color formats for development

HEX
#E9636E
RGB
rgb(233, 99, 110)
HSL
hsl(355, 75%, 65%)
OKLCH
oklch(0.67 0.166 17.8)
CMYK
cmyk(0%, 58%, 53%, 9%)

Accessibility

WCAG contrast compliance

On White Background

3.24:1

AA AAA

On Black Background

6.47:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF2
100
#FBE0
200
#F7C5
300
#F098
400
#E963
500
#E236
600
#C41C
700
#9C16
800
#7010
900
#470A
950
#2D06

Shades

Darker variations

1#E54653
2#E02938
3#CB1D2C
4#AE1925
5#91151F
6#741119
7#570C13
8#3A080C
9#1D0406

Tints

Lighter variations

1#EB727C
2#ED828B
3#EF9299
4#F2A1A8
5#F4B1B6
6#F6C1C5
7#F8D0D3
8#FBE0E2
9#FDEFF0

Tones

Muted variations

1#E26A74
2#DB7079
3#D5777F
4#CE7E84
5#C7848A
6#C18B8F
7#BA9295
8#B3989B
9#AC9FA0

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2F3
BackgroundsSubtle highlightsCard backgrounds
100
FBE0
#FBE0E2
Light backgroundsTable row hoverSkeleton loading
200
F7C5
#F7C5C9
Secondary backgroundsInput backgroundsDividers
300
F098
#F098A0
BordersInactive statesPlaceholder text
400
E963
#E9636E
Disabled statesSecondary iconsMuted text
500
E236
#E23645
Primary brand colorCTAsActive elementsLinks
600
C41C
#C41C2A
Hover statesFocus ringsPrimary buttons hover
700
9C16
#9C1621
Active/pressed statesDark mode accentsSecondary text
800
7010
#701018
Text on light backgroundsHeadingsStrong borders
900
470A
#470A0F
Primary textHigh emphasis contentDark headings
950
2D06
#2D060A
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FDF2F3;
  --salmon-100: #FBE0E2;
  --salmon-200: #F7C5C9;
  --salmon-300: #F098A0;
  --salmon-400: #E9636E;
  --salmon-500: #E23645;
  --salmon-600: #C41C2A;
  --salmon-700: #9C1621;
  --salmon-800: #701018;
  --salmon-900: #470A0F;
  --salmon-950: #2D060A;
}
Generate More ShadesCreate PaletteConvert Color