Chocolate
#D97008
OrangeColor Codes
All color formats for development
HEX
#D97008RGB
rgb(217, 112, 8)HSL
hsl(30, 93%, 44%)OKLCH
oklch(0.655 0.161 54.5)CMYK
cmyk(0%, 48%, 96%, 15%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C36507
2#AD5A06
3#984F05
4#824305
5#6C3804
6#572D03
7#412202
8#2B1602
9#160B01
Tints
Lighter variations
1#F47E09
2#F78D23
3#F89B3E
4#F9A95A
5#FAB875
6#FBC691
7#FCD4AC
8#FDE2C8
9#FEF1E3
Tones
Muted variations
1#CE7012
2#C4701D
3#B97027
4#AF7032
5#A4703C
6#9A7046
7#907051
8#85705B
9#7B7066
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 {
--chocolate-50: #FEF7F0;
--chocolate-100: #FEEDDD;
--chocolate-200: #FDDEBF;
--chocolate-300: #FBC48E;
--chocolate-400: #F9A653;
--chocolate-500: #F78C22;
--chocolate-600: #D97008;
--chocolate-700: #AC5906;
--chocolate-800: #7B4004;
--chocolate-900: #4F2903;
--chocolate-950: #311A02;
}