Salmon

#F89191

Red

Color Codes

All color formats for development

HEX
#F89191
RGB
rgb(248, 145, 145)
HSL
hsl(0, 88%, 77%)
OKLCH
oklch(0.765 0.125 20.4)
CMYK
cmyk(0%, 42%, 42%, 3%)

Accessibility

WCAG contrast compliance

On White Background

2.22:1

AA AAA

On Black Background

9.45: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#F66C6C
2#F34747
3#F12222
4#DD0E0E
5#B90C0C
6#940909
7#6F0707
8#4A0505
9#250202

Tints

Lighter variations

1#F99C9C
2#F9A7A7
3#FAB2B2
4#FBBDBD
5#FBC8C8
6#FCD3D3
7#FDDEDE
8#FEE9E9
9#FEF4F4

Tones

Muted variations

1#F39696
2#EE9B9B
3#E8A0A0
4#E3A5A5
5#DEABAB
6#D9B0B0
7#D4B5B5
8#CFBABA
9#CABFBF

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1F1
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDDD
Light backgroundsTable row hoverSkeleton loading
200
FBC1
#FBC1C1
Secondary backgroundsInput backgroundsDividers
300
F891
#F89191
BordersInactive statesPlaceholder text
400
F457
#F45757
Disabled statesSecondary iconsMuted text
500
F127
#F12727
Primary brand colorCTAsActive elementsLinks
600
D30D
#D30D0D
Hover statesFocus ringsPrimary buttons hover
700
A80B
#A80B0B
Active/pressed statesDark mode accentsSecondary text
800
7808
#780808
Text on light backgroundsHeadingsStrong borders
900
4D05
#4D0505
Primary textHigh emphasis contentDark headings
950
3003
#300303
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FEF1F1;
  --salmon-100: #FDDDDD;
  --salmon-200: #FBC1C1;
  --salmon-300: #F89191;
  --salmon-400: #F45757;
  --salmon-500: #F12727;
  --salmon-600: #D30D0D;
  --salmon-700: #A80B0B;
  --salmon-800: #780808;
  --salmon-900: #4D0505;
  --salmon-950: #300303;
}
Generate More ShadesCreate PaletteConvert Color