Chocolate
#E77D32
OrangeColor Codes
All color formats for development
HEX
#E77D32RGB
rgb(231, 125, 50)HSL
hsl(25, 79%, 55%)OKLCH
oklch(0.697 0.156 51.8)CMYK
cmyk(0%, 46%, 78%, 9%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#E26E1B
2#C96118
3#B05515
4#974912
5#7E3D0F
6#64310C
7#4B2509
8#321806
9#190C03
Tints
Lighter variations
1#E98A46
2#EC975B
3#EEA46F
4#F1B184
5#F3BE98
6#F5CBAD
7#F8D8C1
8#FAE5D6
9#FDF2EA
Tones
Muted variations
1#DE7F3B
2#D58044
3#CC824D
4#C38356
5#BA855F
6#B18668
7#A78871
8#9E897A
9#958B83
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF6 #FDF6F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBEB #FBEBDF | Light backgroundsTable row hoverSkeleton loading |
| 200 | F8D9 #F8D9C4 | Secondary backgroundsInput backgroundsDividers |
| 300 | F3BD #F3BD96 | BordersInactive statesPlaceholder text |
| 400 | EC9A #EC9A5F | Disabled statesSecondary iconsMuted text |
| 500 | E77D #E77D32 | Primary brand colorCTAsActive elementsLinks |
| 600 | C961 #C96118 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A04D #A04D13 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7237 #72370D | Text on light backgroundsHeadingsStrong borders |
| 900 | 4923 #492309 | Primary textHigh emphasis contentDark headings |
| 950 | 2E16 #2E1605 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--chocolate-50: #FDF6F1;
--chocolate-100: #FBEBDF;
--chocolate-200: #F8D9C4;
--chocolate-300: #F3BD96;
--chocolate-400: #EC9A5F;
--chocolate-500: #E77D32;
--chocolate-600: #C96118;
--chocolate-700: #A04D13;
--chocolate-800: #72370D;
--chocolate-900: #492309;
--chocolate-950: #2E1605;
}