Salmon
#E67F65
RedColor Codes
All color formats for development
HEX
#E67F65RGB
rgb(230, 127, 101)HSL
hsl(12, 72%, 65%)OKLCH
oklch(0.705 0.133 35.1)CMYK
cmyk(0%, 45%, 56%, 10%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#E16749
2#DD502C
3#C84220
4#AB381C
5#8F2F17
6#722613
7#561C0E
8#391309
9#1D0905
Tints
Lighter variations
1#E98C75
2#EB9984
3#EEA694
4#F0B2A3
5#F3BFB2
6#F5CCC2
7#F8D9D1
8#FAE5E0
9#FDF2F0
Tones
Muted variations
1#E0836C
2#D98772
3#D38B79
4#CC8F7F
5#C69286
6#BF968C
7#B99A92
8#B39E99
9#ACA29F
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF4 #FDF4F2 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FAE5 #FAE5E0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | F6D0 #F6D0C6 | Secondary backgroundsInput backgroundsDividers |
| 300 | EFAB #EFAB9A | BordersInactive statesPlaceholder text |
| 400 | E67F #E67F65 | Disabled statesSecondary iconsMuted text |
| 500 | DF5B #DF5B3A | Primary brand colorCTAsActive elementsLinks |
| 600 | C140 #C1401F | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9A33 #9A3319 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 6E24 #6E2412 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4617 #46170B | Primary textHigh emphasis contentDark headings |
| 950 | 2C0E #2C0E07 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--salmon-50: #FDF4F2;
--salmon-100: #FAE5E0;
--salmon-200: #F6D0C6;
--salmon-300: #EFAB9A;
--salmon-400: #E67F65;
--salmon-500: #DF5B3A;
--salmon-600: #C1401F;
--salmon-700: #9A3319;
--salmon-800: #6E2412;
--salmon-900: #46170B;
--salmon-950: #2C0E07;
}