Chocolate
#C75F1A
OrangeColor Codes
All color formats for development
HEX
#C75F1ARGB
rgb(199, 95, 26)HSL
hsl(24, 77%, 44%)OKLCH
oklch(0.603 0.152 48.3)CMYK
cmyk(0%, 52%, 87%, 22%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#B35517
2#9F4C15
3#8B4212
4#77390F
5#632F0D
6#4F260A
7#3C1C08
8#281305
9#140903
Tints
Lighter variations
1#E06B1D
2#E57B35
3#E88C4E
4#EB9C67
5#EFAD81
6#F2BD9A
7#F5CEB3
8#F8DECC
9#FCEFE6
Tones
Muted variations
1#BE6122
2#B5622B
3#AD6434
4#A4663C
5#9B6845
6#93694E
7#8A6B56
8#816D5F
9#796E68
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF6 #FDF6F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBEA #FBEADF | Light backgroundsTable row hoverSkeleton loading |
| 200 | F7D9 #F7D9C4 | Secondary backgroundsInput backgroundsDividers |
| 300 | F2BB #F2BB97 | BordersInactive statesPlaceholder text |
| 400 | EA98 #EA9861 | Disabled statesSecondary iconsMuted text |
| 500 | E57B #E57B34 | Primary brand colorCTAsActive elementsLinks |
| 600 | C75F #C75F1A | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9E4C #9E4C15 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7136 #71360F | Text on light backgroundsHeadingsStrong borders |
| 900 | 4823 #482309 | Primary textHigh emphasis contentDark headings |
| 950 | 2D16 #2D1606 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--chocolate-50: #FDF6F1;
--chocolate-100: #FBEADF;
--chocolate-200: #F7D9C4;
--chocolate-300: #F2BB97;
--chocolate-400: #EA9861;
--chocolate-500: #E57B34;
--chocolate-600: #C75F1A;
--chocolate-700: #9E4C15;
--chocolate-800: #71360F;
--chocolate-900: #482309;
--chocolate-950: #2D1606;
}