Salmon

#EA617A

Red

Color Codes

All color formats for development

HEX
#EA617A
RGB
rgb(234, 97, 122)
HSL
hsl(349, 77%, 65%)
OKLCH
oklch(0.671 0.17 11.7)
CMYK
cmyk(0%, 59%, 48%, 8%)

Accessibility

WCAG contrast compliance

On White Background

3.24:1

AA AAA

On Black Background

6.49:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF1
100
#FBDF
200
#F7C4
300
#F297
400
#EA61
500
#E534
600
#C71A
700
#9E15
800
#710F
900
#4809
950
#2D06

Shades

Darker variations

1#E74462
2#E32649
3#CD1B3B
4#B01733
5#93132A
6#750F22
7#580B19
8#3B0811
9#1D0408

Tints

Lighter variations

1#ED7188
2#EF8195
3#F190A2
4#F3A0AF
5#F5B0BD
6#F7C0CA
7#F9D0D7
8#FBDFE4
9#FDEFF2

Tones

Muted variations

1#E4687F
2#DD6F83
3#D67687
4#CF7D8C
5#C88390
6#C18A94
7#BA9199
8#B3989D
9#AD9FA1

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1F4
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFE4
Light backgroundsTable row hoverSkeleton loading
200
F7C4
#F7C4CE
Secondary backgroundsInput backgroundsDividers
300
F297
#F297A8
BordersInactive statesPlaceholder text
400
EA61
#EA617A
Disabled statesSecondary iconsMuted text
500
E534
#E53454
Primary brand colorCTAsActive elementsLinks
600
C71A
#C71A39
Hover statesFocus ringsPrimary buttons hover
700
9E15
#9E152E
Active/pressed statesDark mode accentsSecondary text
800
710F
#710F21
Text on light backgroundsHeadingsStrong borders
900
4809
#480915
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: #FDF1F4;
  --salmon-100: #FBDFE4;
  --salmon-200: #F7C4CE;
  --salmon-300: #F297A8;
  --salmon-400: #EA617A;
  --salmon-500: #E53454;
  --salmon-600: #C71A39;
  --salmon-700: #9E152E;
  --salmon-800: #710F21;
  --salmon-900: #480915;
  --salmon-950: #2D060D;
}
Generate More ShadesCreate PaletteConvert Color