Salmon

#F75570

Red

Color Codes

All color formats for development

HEX
#F75570
RGB
rgb(247, 85, 112)
HSL
hsl(350, 91%, 65%)
OKLCH
oklch(0.675 0.197 14.4)
CMYK
cmyk(0%, 66%, 55%, 3%)

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
#FEF0
100
#FDDD
200
#FCC0
300
#FA8F
400
#F755
500
#F524
600
#D60A
700
#AA08
800
#7A06
900
#4E04
950
#3102

Shades

Darker variations

1#F53555
2#F4153A
3#DE0A2E
4#BE0927
5#9E0721
6#7F061A
7#5F0414
8#3F030D
9#200107

Tints

Lighter variations

1#F8667E
2#F9778C
3#F9889B
4#FA99A9
5#FBAAB7
6#FCBBC6
7#FDCCD4
8#FDDDE2
9#FEEEF1

Tones

Muted variations

1#EF5D75
2#E7657A
3#DF6D80
4#D67585
5#CE7D8B
6#C68590
7#BE8D96
8#B6969B
9#AE9EA0

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0F3
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDE2
Light backgroundsTable row hoverSkeleton loading
200
FCC0
#FCC0CA
Secondary backgroundsInput backgroundsDividers
300
FA8F
#FA8FA1
BordersInactive statesPlaceholder text
400
F755
#F75570
Disabled statesSecondary iconsMuted text
500
F524
#F52447
Primary brand colorCTAsActive elementsLinks
600
D60A
#D60A2C
Hover statesFocus ringsPrimary buttons hover
700
AA08
#AA0823
Active/pressed statesDark mode accentsSecondary text
800
7A06
#7A0619
Text on light backgroundsHeadingsStrong borders
900
4E04
#4E0410
Primary textHigh emphasis contentDark headings
950
3102
#31020A
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FEF0F3;
  --salmon-100: #FDDDE2;
  --salmon-200: #FCC0CA;
  --salmon-300: #FA8FA1;
  --salmon-400: #F75570;
  --salmon-500: #F52447;
  --salmon-600: #D60A2C;
  --salmon-700: #AA0823;
  --salmon-800: #7A0619;
  --salmon-900: #4E0410;
  --salmon-950: #31020A;
}
Generate More ShadesCreate PaletteConvert Color