Dark Orange
#F78C22
OrangeColor Codes
All color formats for development
HEX
#F78C22RGB
rgb(247, 140, 34)HSL
hsl(30, 93%, 55%)OKLCH
oklch(0.741 0.167 58.1)CMYK
cmyk(0%, 43%, 86%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F47E09
2#D97008
3#BD6207
4#A25406
5#874605
6#6C3804
7#512A03
8#361C02
9#1B0E01
Tints
Lighter variations
1#F89838
2#F9A34E
3#F9AF64
4#FABA7A
5#FBC690
6#FCD1A6
7#FDDDBD
8#FDE8D3
9#FEF4E9
Tones
Muted variations
1#EC8C2C
2#E28C37
3#D78C42
4#CC8C4C
5#C28C57
6#B78C62
7#AC8C6C
8#A28C77
9#978C82
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF7 #FEF7F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEED #FEEDDD | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDDE #FDDEBF | Secondary backgroundsInput backgroundsDividers |
| 300 | FBC4 #FBC48E | BordersInactive statesPlaceholder text |
| 400 | F9A6 #F9A653 | Disabled statesSecondary iconsMuted text |
| 500 | F78C #F78C22 | Primary brand colorCTAsActive elementsLinks |
| 600 | D970 #D97008 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AC59 #AC5906 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7B40 #7B4004 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4F29 #4F2903 | Primary textHigh emphasis contentDark headings |
| 950 | 311A #311A02 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--dark-orange-50: #FEF7F0;
--dark-orange-100: #FEEDDD;
--dark-orange-200: #FDDEBF;
--dark-orange-300: #FBC48E;
--dark-orange-400: #F9A653;
--dark-orange-500: #F78C22;
--dark-orange-600: #D97008;
--dark-orange-700: #AC5906;
--dark-orange-800: #7B4004;
--dark-orange-900: #4F2903;
--dark-orange-950: #311A02;
}