Chocolate color guide
HEX
#7B3F00
RGB
123, 63, 0
HSL
31°, 100%, 24%
HSV
31°, 100%, 48%
Brown with dessert gravity — rich, mouth-watering, and a little indulgent even as a flat swatch. #7B3F00 suggests depth the way actual cocoa suggests intensity. It can feel luxurious or heavy depending on contrast.
Best for
Consulting deliverables, strategy documents, and data-driven layouts.
Accessibility
White text on chocolate passes AAA at 8.22:1, so it is safe for dark backgrounds and section headers.
How does chocolate compare to nearby colors?
What is the difference between chocolate and mahogany?
The visible difference between Chocolate (#7B3F00) and Mahogany (#C04000) is subtle, but it still nudges the family from coffee, leather, and wood toward warm wood. Chocolate can take on dark-panel, cover, and anchor duties that Mahogany cannot handle as comfortably once real text and interface elements are added. Choose chocolate when the surrounding system aligns better with hospitality, food, and grounded heritage brands, and move to mahogany when the stronger contextual fit is outdoor, food, and lifestyle systems.
What color is chocolate?
Chocolate brown is ubiquitous in confectionery packaging, bakery branding, and premium leather goods marketing. In interiors it often appears in traditional wood stains.
What is the hex code for chocolate?
| Format | Value |
|---|---|
| HEX | #7B3F00 |
| RGB | rgb(123, 63, 0) |
| HSL | hsl(31°, 100%, 24%) |
| HSV / HSB | hsv(31°, 100%, 48%) |
| CMYK (approx.) | cmyk(0%, 49%, 100%, 52%) |
Convert Chocolate to other color formats
Open the color converter with Chocolate (#7B3F00) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Chocolate in the color converter →What does chocolate mean in design?
Chocolate is often associated with comfort, reward, and sensual richness. Compared with mahogany it is usually less red; compared with chestnut it can read deeper and less "autumn leaf."
How do I use chocolate in code?
| CSS (hex) | color: #7B3F00; |
| CSS (rgb) | color: rgb(123, 63, 0); |
| CSS (hsl) | color: hsl(31, 100%, 24%); |
| RGB % | rgb(48%, 25%, 0%) |
| Tailwind | text-[#7B3F00] |
| SwiftUI | Color(red: 0.482, green: 0.247, blue: 0.000) |
| UIKit | UIColor(red: 0.482, green: 0.247, blue: 0.000, alpha: 1.0) |
| Android | Color.rgb(123, 63, 0) |
| Compose | Color(0xFF7B3F00) |
| Web Safe | #663300 |
Is chocolate accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 8.22:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaBlack text on this color | 2.55:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on white | 8.22:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on black | 2.55:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does chocolate look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with chocolate
White gives chocolate the clean edge contrast it needs, so dark panels, labels, and type stay readable instead of sinking into the color.
Navy blue gives chocolate a cooler anchor that keeps the palette from turning too sepia or overly heritage-coded.
With a vivid chocolate, cream is gentler than white, so the palette keeps warmth and avoids looking overlit.
When chocolate is already bright, charcoal absorbs some of the visual heat and keeps the combination closer to hospitality, food, and grounded heritage brands than to novelty graphics.
Sage Green helps chocolate feel more complete in practice because the pairing combines coffee, leather, and wood qualities with sage and moss support instead of leaving the source color to do every job alone.
What colors clash with chocolate
Neon Green makes chocolate feel cheaper and less material, which is exactly the opposite of what these grounded colors usually contribute.
With chocolate, magenta introduces a second emotional story instead of reinforcing the first one, so the palette can feel internally split.
Cyan can make chocolate feel more software-default than designed, especially when the rest of the palette is trying to hold onto material nuance.
Pastel Pink can make chocolate feel softer and sweeter than intended, which weakens palettes that rely on gravity or structure.
How should I use chocolate in design?
- •Try chocolate as your primary dark value instead of black — it adds character and warmth while still providing strong contrast for readability.
- •Pair chocolate with cool accents (navy, sage, steel blue) for sharp contrast, or keep it with other warm tones (cream, gold, tan) for a cohesive, editorial feel.
- •Chocolate's depth makes it effective for premium packaging, dark-mode interfaces, and editorial layouts that need gravitas without defaulting to black.
What are good chocolate palettes?
Onyx foundation
Consulting deliverables, strategy documents, and data-driven layouts.
Design with chocolate in Moda
Create a presentation or document using chocolate as your accent color. Moda's AI applies your color palette automatically.
Create a design with chocolate →What are the shades and tints of chocolate?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for chocolate?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Brown
Brown lives in the same neighborhood as chocolate, but the finish shift is enough to make one feel better for hospitality, food, and grounded heritage brands and the other for a different visual context.
Sepia
Sepia is nearly adjacent to chocolate in hue; what separates them is intensity, with sepia reading dustier and easier to extend across a layout.
Mahogany
Mahogany stays in the same color family as chocolate, but the change in value moves it into different layout jobs, especially once backgrounds, charts, or section dividers enter the system.
Mocha
Mocha is almost the same hue as chocolate; the real difference is value, with mocha feeling more open and surface-friendly.
Coffee
Coffee is almost the same hue as chocolate; the real difference is value, with coffee feeling more open and surface-friendly.
Frequently asked questions
What is the hex code for chocolate?
The hex code for chocolate is #7B3F00. In RGB, that's 123 red, 63 green, and 0 blue. The approximate CMYK equivalent is 0% cyan, 49% magenta, 100% yellow, and 52% key (black).
Is chocolate a warm or cool color?
Chocolate sits on the warm side of the palette, so it pairs easily with other warm tones and becomes more energetic when you place it against cooler blues or blue-grays.
Should chocolate lead the palette or stay in supporting roles?
Chocolate has enough chroma to take the lead, but it usually performs best when the surrounding system stays quieter. Treat it as the voice of emphasis, not the answer to every layout need.
Where does chocolate work best in a layout?
Chocolate has enough depth to anchor a layout while still reading as a color, which makes it useful for dark section blocks, headlines, and heavier accents.
Is chocolate accessible?
Chocolate is strong enough for white text at 8.22:1 contrast, so it can handle dark panels, tags, and section headers without much trouble. As text on white, though, it is usually better reserved for larger headings or short accents than for long paragraphs.
More brown colors
See all brown colors →Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Brown colors
Compare chocolate with other brown tones.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Orange colors
Explore nearby color families to build stronger palettes and contrasts.
Red colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.