Salmon

#EA6279

Red

Color Codes

All color formats for development

HEX
#EA6279
RGB
rgb(234, 98, 121)
HSL
hsl(350, 76%, 65%)
OKLCH
oklch(0.672 0.169 12.5)
CMYK
cmyk(0%, 58%, 48%, 8%)

Accessibility

WCAG contrast compliance

On White Background

3.22:1

AA AAA

On Black Background

6.52:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF2
100
#FBE0
200
#F7C5
300
#F198
400
#EA62
500
#E335
600
#C51B
700
#9D15
800
#700F
900
#480A
950
#2D06

Shades

Darker variations

1#E64560
2#E22847
3#CC1C39
4#AF1831
5#921429
6#751021
7#580C19
8#3A0810
9#1D0408

Tints

Lighter variations

1#EC7286
2#EE8193
3#F091A1
4#F2A1AE
5#F4B0BC
6#F6C0C9
7#F9D0D7
8#FBE0E4
9#FDEFF2

Tones

Muted variations

1#E3697D
2#DC6F82
3#D57686
4#CE7D8B
5#C8848F
6#C18B94
7#BA9198
8#B3989D
9#AD9FA1

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2F3
BackgroundsSubtle highlightsCard backgrounds
100
FBE0
#FBE0E4
Light backgroundsTable row hoverSkeleton loading
200
F7C5
#F7C5CD
Secondary backgroundsInput backgroundsDividers
300
F198
#F198A7
BordersInactive statesPlaceholder text
400
EA62
#EA6279
Disabled statesSecondary iconsMuted text
500
E335
#E33552
Primary brand colorCTAsActive elementsLinks
600
C51B
#C51B37
Hover statesFocus ringsPrimary buttons hover
700
9D15
#9D152C
Active/pressed statesDark mode accentsSecondary text
800
700F
#700F1F
Text on light backgroundsHeadingsStrong borders
900
480A
#480A14
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: #FDF2F3;
  --salmon-100: #FBE0E4;
  --salmon-200: #F7C5CD;
  --salmon-300: #F198A7;
  --salmon-400: #EA6279;
  --salmon-500: #E33552;
  --salmon-600: #C51B37;
  --salmon-700: #9D152C;
  --salmon-800: #700F1F;
  --salmon-900: #480A14;
  --salmon-950: #2D060D;
}
Generate More ShadesCreate PaletteConvert Color