Salmon

#FA8F9A

Red

Color Codes

All color formats for development

HEX
#FA8F9A
RGB
rgb(250, 143, 154)
HSL
hsl(354, 91%, 77%)
OKLCH
oklch(0.767 0.13 14)
CMYK
cmyk(0%, 43%, 38%, 2%)

Accessibility

WCAG contrast compliance

On White Background

2.22:1

AA AAA

On Black Background

9.46: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#F86978
2#F64456
3#F41E34
4#E10B20
5#BC091B
6#960715
7#710510
8#4B040B
9#260205

Tints

Lighter variations

1#FA9AA4
2#FBA5AE
3#FBB1B8
4#FCBCC2
5#FCC7CC
6#FDD2D6
7#FDDDE1
8#FEE9EB
9#FEF4F5

Tones

Muted variations

1#F4949E
2#EF9AA2
3#EA9FA6
4#E4A4AB
5#DFAAAF
6#DAAFB3
7#D4B4B8
8#CFBABC
9#CABFC0

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0F2
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDE0
Light backgroundsTable row hoverSkeleton loading
200
FCC0
#FCC0C6
Secondary backgroundsInput backgroundsDividers
300
FA8F
#FA8F9A
BordersInactive statesPlaceholder text
400
F755
#F75565
Disabled statesSecondary iconsMuted text
500
F524
#F52439
Primary brand colorCTAsActive elementsLinks
600
D60A
#D60A1F
Hover statesFocus ringsPrimary buttons hover
700
AA08
#AA0818
Active/pressed statesDark mode accentsSecondary text
800
7A06
#7A0611
Text on light backgroundsHeadingsStrong borders
900
4E04
#4E040B
Primary textHigh emphasis contentDark headings
950
3102
#310207
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FEF0F2;
  --salmon-100: #FDDDE0;
  --salmon-200: #FCC0C6;
  --salmon-300: #FA8F9A;
  --salmon-400: #F75565;
  --salmon-500: #F52439;
  --salmon-600: #D60A1F;
  --salmon-700: #AA0818;
  --salmon-800: #7A0611;
  --salmon-900: #4E040B;
  --salmon-950: #310207;
}
Generate More ShadesCreate PaletteConvert Color