Salmon

#EA626F

Red

Color Codes

All color formats for development

HEX
#EA626F
RGB
rgb(234, 98, 111)
HSL
hsl(354, 76%, 65%)
OKLCH
oklch(0.67 0.168 17.1)
CMYK
cmyk(0%, 58%, 53%, 8%)

Accessibility

WCAG contrast compliance

On White Background

3.24:1

AA AAA

On Black Background

6.48: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#E64555
2#E2283A
3#CC1C2D
4#AF1827
5#921420
6#75101A
7#580C13
8#3A080D
9#1D0406

Tints

Lighter variations

1#EC727E
2#EE818C
3#F0919B
4#F2A1A9
5#F4B0B7
6#F6C0C6
7#F9D0D4
8#FBE0E2
9#FDEFF1

Tones

Muted variations

1#E36975
2#DC6F7A
3#D57680
4#CE7D85
5#C8848B
6#C18B90
7#BA9195
8#B3989B
9#AD9FA0

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
#F7C5CA
Secondary backgroundsInput backgroundsDividers
300
F198
#F198A1
BordersInactive statesPlaceholder text
400
EA62
#EA626F
Disabled statesSecondary iconsMuted text
500
E335
#E33546
Primary brand colorCTAsActive elementsLinks
600
C51B
#C51B2C
Hover statesFocus ringsPrimary buttons hover
700
9D15
#9D1523
Active/pressed statesDark mode accentsSecondary text
800
700F
#700F19
Text on light backgroundsHeadingsStrong borders
900
480A
#480A10
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: #F7C5CA;
  --salmon-300: #F198A1;
  --salmon-400: #EA626F;
  --salmon-500: #E33546;
  --salmon-600: #C51B2C;
  --salmon-700: #9D1523;
  --salmon-800: #700F19;
  --salmon-900: #480A10;
  --salmon-950: #2D060A;
}
Generate More ShadesCreate PaletteConvert Color