Salmon

#EB6070

Red

Color Codes

All color formats for development

HEX
#EB6070
RGB
rgb(235, 96, 112)
HSL
hsl(353, 78%, 65%)
OKLCH
oklch(0.669 0.172 16.1)
CMYK
cmyk(0%, 59%, 52%, 8%)

Accessibility

WCAG contrast compliance

On White Background

3.26:1

AA AAA

On Black Background

6.44:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF1
100
#FBDF
200
#F8C4
300
#F297
400
#EB60
500
#E633
600
#C819
700
#9F14
800
#710E
900
#4909
950
#2D06

Shades

Darker variations

1#E84356
2#E4253B
3#CF1A2F
4#B11628
5#941221
6#760F1B
7#590B14
8#3B070D
9#1E0407

Tints

Lighter variations

1#ED707F
2#EF808D
3#F1909B
4#F3A0A9
5#F5B0B8
6#F7BFC6
7#F9CFD4
8#FBDFE2
9#FDEFF1

Tones

Muted variations

1#E46776
2#DD6E7B
3#D67580
4#D07C86
5#C9838B
6#C28A90
7#BB9196
8#B4989B
9#AD9FA0

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1F3
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFE2
Light backgroundsTable row hoverSkeleton loading
200
F8C4
#F8C4CA
Secondary backgroundsInput backgroundsDividers
300
F297
#F297A1
BordersInactive statesPlaceholder text
400
EB60
#EB6070
Disabled statesSecondary iconsMuted text
500
E633
#E63348
Primary brand colorCTAsActive elementsLinks
600
C819
#C8192D
Hover statesFocus ringsPrimary buttons hover
700
9F14
#9F1424
Active/pressed statesDark mode accentsSecondary text
800
710E
#710E1A
Text on light backgroundsHeadingsStrong borders
900
4909
#490910
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: #FDF1F3;
  --salmon-100: #FBDFE2;
  --salmon-200: #F8C4CA;
  --salmon-300: #F297A1;
  --salmon-400: #EB6070;
  --salmon-500: #E63348;
  --salmon-600: #C8192D;
  --salmon-700: #9F1424;
  --salmon-800: #710E1A;
  --salmon-900: #490910;
  --salmon-950: #2D060A;
}
Generate More ShadesCreate PaletteConvert Color