Salmon

#E96379

Red

Color Codes

All color formats for development

HEX
#E96379
RGB
rgb(233, 99, 121)
HSL
hsl(350, 75%, 65%)
OKLCH
oklch(0.672 0.166 12.7)
CMYK
cmyk(0%, 58%, 48%, 9%)

Accessibility

WCAG contrast compliance

On White Background

3.22:1

AA AAA

On Black Background

6.53: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#E54660
2#E02947
3#CB1D3A
4#AE1932
5#911529
6#741121
7#570C19
8#3A0811
9#1D0408

Tints

Lighter variations

1#EB7287
2#ED8294
3#EF92A1
4#F2A1AF
5#F4B1BC
6#F6C1C9
7#F8D0D7
8#FBE0E4
9#FDEFF2

Tones

Muted variations

1#E26A7E
2#DB7082
3#D57787
4#CE7E8B
5#C7848F
6#C18B94
7#BA9298
8#B3989D
9#AC9FA1

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2F4
BackgroundsSubtle highlightsCard backgrounds
100
FBE0
#FBE0E4
Light backgroundsTable row hoverSkeleton loading
200
F7C5
#F7C5CD
Secondary backgroundsInput backgroundsDividers
300
F098
#F098A7
BordersInactive statesPlaceholder text
400
E963
#E96379
Disabled statesSecondary iconsMuted text
500
E236
#E23653
Primary brand colorCTAsActive elementsLinks
600
C41C
#C41C38
Hover statesFocus ringsPrimary buttons hover
700
9C16
#9C162D
Active/pressed statesDark mode accentsSecondary text
800
7010
#701020
Text on light backgroundsHeadingsStrong borders
900
470A
#470A14
Primary textHigh emphasis contentDark headings
950
2D06
#2D060D
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FDF2F4;
  --salmon-100: #FBE0E4;
  --salmon-200: #F7C5CD;
  --salmon-300: #F098A7;
  --salmon-400: #E96379;
  --salmon-500: #E23653;
  --salmon-600: #C41C38;
  --salmon-700: #9C162D;
  --salmon-800: #701020;
  --salmon-900: #470A14;
  --salmon-950: #2D060D;
}
Generate More ShadesCreate PaletteConvert Color