Salmon
#EAA662
OrangeColor Codes
All color formats for development
HEX
#EAA662RGB
rgb(234, 166, 98)HSL
hsl(30, 76%, 65%)OKLCH
oklch(0.777 0.117 64.6)CMYK
cmyk(0%, 29%, 58%, 8%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#E69545
2#E28528
3#CC741C
4#AF6318
5#925314
6#754210
7#58320C
8#3A2108
9#1D1104
Tints
Lighter variations
1#ECAF72
2#EEB881
3#F0C191
4#F2C9A1
5#F4D2B0
6#F6DBC0
7#F9E4D0
8#FBEDE0
9#FDF6EF
Tones
Muted variations
1#E3A669
2#DCA66F
3#D5A676
4#CEA67D
5#C8A684
6#C1A68B
7#BAA691
8#B3A698
9#ADA69F
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF7 #FDF7F2 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBED #FBEDE0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | F7DE #F7DEC5 | Secondary backgroundsInput backgroundsDividers |
| 300 | F1C4 #F1C498 | BordersInactive statesPlaceholder text |
| 400 | EAA6 #EAA662 | Disabled statesSecondary iconsMuted text |
| 500 | E38C #E38C35 | Primary brand colorCTAsActive elementsLinks |
| 600 | C570 #C5701B | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9D59 #9D5915 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7040 #70400F | Text on light backgroundsHeadingsStrong borders |
| 900 | 4829 #48290A | Primary textHigh emphasis contentDark headings |
| 950 | 2D1A #2D1A06 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--salmon-50: #FDF7F2;
--salmon-100: #FBEDE0;
--salmon-200: #F7DEC5;
--salmon-300: #F1C498;
--salmon-400: #EAA662;
--salmon-500: #E38C35;
--salmon-600: #C5701B;
--salmon-700: #9D5915;
--salmon-800: #70400F;
--salmon-900: #48290A;
--salmon-950: #2D1A06;
}