Salmon
#F59794
RedColor Codes
All color formats for development
HEX
#F59794RGB
rgb(245, 151, 148)HSL
hsl(2, 83%, 77%)OKLCH
oklch(0.772 0.114 22)CMYK
cmyk(0%, 38%, 40%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F27470
2#EE514C
3#EB2E28
4#D81B14
5#B41611
6#90120D
7#6C0D0A
8#480907
9#240403
Tints
Lighter variations
1#F6A19E
2#F7ACA9
3#F8B6B4
4#F9C1BF
5#FACBC9
6#FBD5D4
7#FCE0DF
8#FDEAEA
9#FEF5F4
Tones
Muted variations
1#F09B99
2#EBA09D
3#E6A5A2
4#E2A9A7
5#DDAEAC
6#D8B2B1
7#D3B7B6
8#CEBBBB
9#C9C0BF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF1 #FEF1F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FCDF #FCDFDE | Light backgroundsTable row hoverSkeleton loading |
| 200 | F9C4 #F9C4C2 | Secondary backgroundsInput backgroundsDividers |
| 300 | F597 #F59794 | BordersInactive statesPlaceholder text |
| 400 | F061 #F0615C | Disabled statesSecondary iconsMuted text |
| 500 | EB33 #EB332D | Primary brand colorCTAsActive elementsLinks |
| 600 | CD19 #CD1913 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A314 #A3140F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 750E #750E0B | Text on light backgroundsHeadingsStrong borders |
| 900 | 4B09 #4B0907 | Primary textHigh emphasis contentDark headings |
| 950 | 2F06 #2F0604 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--salmon-50: #FEF1F1;
--salmon-100: #FCDFDE;
--salmon-200: #F9C4C2;
--salmon-300: #F59794;
--salmon-400: #F0615C;
--salmon-500: #EB332D;
--salmon-600: #CD1913;
--salmon-700: #A3140F;
--salmon-800: #750E0B;
--salmon-900: #4B0907;
--salmon-950: #2F0604;
}