Salmon

#F89199

Red

Color Codes

All color formats for development

HEX
#F89199
RGB
rgb(248, 145, 153)
HSL
hsl(355, 88%, 77%)
OKLCH
oklch(0.767 0.125 15.4)
CMYK
cmyk(0%, 42%, 38%, 3%)

Accessibility

WCAG contrast compliance

On White Background

2.21:1

AA AAA

On Black Background

9.50:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF1
100
#FDDD
200
#FBC1
300
#F891
400
#F457
500
#F127
600
#D30D
700
#A80B
800
#7808
900
#4D05
950
#3003

Shades

Darker variations

1#F66C77
2#F34755
3#F12233
4#DD0E1F
5#B90C1A
6#940915
7#6F0710
8#4A050A
9#250205

Tints

Lighter variations

1#F99CA4
2#F9A7AE
3#FAB2B8
4#FBBDC2
5#FBC8CC
6#FCD3D6
7#FDDEE1
8#FEE9EB
9#FEF4F5

Tones

Muted variations

1#F3969E
2#EE9BA2
3#E8A0A6
4#E3A5AB
5#DEABAF
6#D9B0B3
7#D4B5B7
8#CFBABC
9#CABFC0

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1F2
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDE0
Light backgroundsTable row hoverSkeleton loading
200
FBC1
#FBC1C6
Secondary backgroundsInput backgroundsDividers
300
F891
#F89199
BordersInactive statesPlaceholder text
400
F457
#F45764
Disabled statesSecondary iconsMuted text
500
F127
#F12738
Primary brand colorCTAsActive elementsLinks
600
D30D
#D30D1E
Hover statesFocus ringsPrimary buttons hover
700
A80B
#A80B18
Active/pressed statesDark mode accentsSecondary text
800
7808
#780811
Text on light backgroundsHeadingsStrong borders
900
4D05
#4D050B
Primary textHigh emphasis contentDark headings
950
3003
#300307
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FEF1F2;
  --salmon-100: #FDDDE0;
  --salmon-200: #FBC1C6;
  --salmon-300: #F89199;
  --salmon-400: #F45764;
  --salmon-500: #F12738;
  --salmon-600: #D30D1E;
  --salmon-700: #A80B18;
  --salmon-800: #780811;
  --salmon-900: #4D050B;
  --salmon-950: #300307;
}
Generate More ShadesCreate PaletteConvert Color