Chocolate
#E05E00
OrangeColor Codes
All color formats for development
HEX
#E05E00RGB
rgb(224, 94, 0)HSL
hsl(25, 100%, 44%)OKLCH
oklch(0.638 0.181 45.5)CMYK
cmyk(0%, 58%, 100%, 12%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#CA5400
2#B44B00
3#9D4100
4#873800
5#702F00
6#5A2500
7#431C00
8#2D1300
9#160900
Tints
Lighter variations
1#FD6900
2#FF7A1B
3#FF8A37
4#FF9B54
5#FFAC70
6#FFBC8D
7#FFCDA9
8#FFDEC6
9#FFEEE2
Tones
Muted variations
1#D55F0B
2#CA6116
3#BF6322
4#B4652D
5#A86738
6#9D6943
7#926B4F
8#876C5A
9#7B6E65
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF6 #FFF6F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FFEA #FFEADB | Light backgroundsTable row hoverSkeleton loading |
| 200 | FFD8 #FFD8BD | Secondary backgroundsInput backgroundsDividers |
| 300 | FFBB #FFBB8A | BordersInactive statesPlaceholder text |
| 400 | FF97 #FF974D | Disabled statesSecondary iconsMuted text |
| 500 | FF79 #FF791A | Primary brand colorCTAsActive elementsLinks |
| 600 | E05E #E05E00 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B34A #B34A00 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 8035 #803500 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5222 #522200 | Primary textHigh emphasis contentDark headings |
| 950 | 3315 #331500 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--chocolate-50: #FFF6F0;
--chocolate-100: #FFEADB;
--chocolate-200: #FFD8BD;
--chocolate-300: #FFBB8A;
--chocolate-400: #FF974D;
--chocolate-500: #FF791A;
--chocolate-600: #E05E00;
--chocolate-700: #B34A00;
--chocolate-800: #803500;
--chocolate-900: #522200;
--chocolate-950: #331500;
}