Dark brown is an earthy, warm shade with deep richness, like chocolate or espresso. Positioned between red and green on the color wheel, it evokes stability and groundedness. Related shades include mocha and walnut. Use dark brown in designs for a cozy, inviting feel.
Dark brown is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #654321
- RGB value: 39.6% red, 26.3% green, 12.9% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as dark brown, consider:
- Mahogany (#c04000): Mahogany offers a rich brown with a hint of red, mimicking the depth of dark brown while introducing a subtle warmth.
- Chocolate (#713600): Chocolate reflects a deeper, more luscious brown, capturing the essence of dark brown with a touch of sweetness in its hue.
- Mocha (#6d3b07): Mocha combines dark brown's depth with a slightly softer, earthy tone, resembling the look of brewed coffee.
- Cognac (#a2574f): Cognac provides a warm, rich brown with a reddish undertone, echoing the robust and deep qualities of dark brown.
To complement dark brown, consider pairing it with:
- TURQUOISE (#40E0D0): This vibrant blue-green hue provides a striking contrast to dark brown's earthy tone, adding energy and brightness to the palette.
- RUST (#B7410E): With its warm, reddish undertone, rust complements dark brown by enhancing its rich, earthy characteristics and creating a harmonious, autumnal feel.
- CREAM (#FDFBD4): As a light, neutral color, cream offers a subtle backdrop that highlights dark brown's depth, ensuring a classic and sophisticated combination.
- MINT GREEN (#ADEBB3): This refreshing, soft green tone works well with dark brown by adding a playful, lively touch while maintaining a balanced, natural vibe.
- GOLD (#EFBF04): Gold introduces a warm, luxurious accent that enhances dark brown's richness, creating an elegant and timeless pairing.
While dark brown is earthy and warm, it may clash with:
- Electric Blue (#00F0FF): The intense vibrancy of electric blue creates a stark contrast with dark brown's richness, leading to a visually disruptive combination.
- Neon Green (#2CFF05): The brightness of neon green clashes with dark brown's deep and grounding presence, making the pairing appear unbalanced.
- Scarlet (#ED2100): The intense warmth of scarlet competes with dark brown, causing a visual tension that detracts from both colors' individual appeal.
- Magenta (#FD3DB5): Magenta's bold and vivid nature can overpower dark brown, resulting in a mismatched and overly vibrant palette.
- Lime Green (#89F336): The lively brightness of lime green can seem overly vivid against the warm, deep tone of dark brown, creating a disharmonious pairing.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Mocha Cascade
Chocolate Lake
Jungle Mosaic
Contrast checker
Contrast 8.83
- Large Text
#654321
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Contrast 2.38
- Large Text
#654321
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #654321, known as Dark brown, has RGB values of R:101, G:67, B:33 and CMYK values of C:0, M:34, Y:67, K:60.
| VALUE | CSS | |
|---|---|---|
| HEX | #654321 | #654321 |
| RGB DECIMAL | 101, 67, 33 | RGB(101,67,33) |
| RGB PERCENTAGE | 39.6, 26.3, 12.9 | RGB(39.6%,26.3%,12.9%) |
| CMYK | 0, 34, 67, 60 | |
| HSL | HSL(30.0, 50.7%, 26.3%) | HSL(30.0, 50.7%, 26.3%) |
| HSV (OR HSB) | 30.0°, 67.3, 39.6 | |
| WEB SAFE | #1025151 | #1025151 |
| BINARY | 01100101, 01000011, 00100001 | |
| iOS - SwiftUI | Color(red: 0.396, green: 0.263, blue: 0.129) | |
| iOS - UIKit | UIColor(red: 0.396, green: 0.263, blue: 0.129, alpha: 1) | |
| Android - Compose | Color(0xFF654321) |
