Coffee is a rich, comforting hue that exudes warmth. It sits between dark brown and reddish-brown on the color wheel. This earthy tone often features caramel undertones. Explore using coffee shades like mocha or espresso in cozy spaces or clothing like sweaters and blazers for a sophisticated touch.
Coffee is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #6F4E37
- RGB value: 43.5% red, 30.6% green, 21.6% 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 coffee, consider:
- Mocha (#6d3b07): Much like coffee, Mocha shares a rich brown finish, capturing the warmth and depth typical of a dark roast hue.
- Taupe (#54463a): Taupe offers a muted, earthy tone that resonates with the deep, subtle richness you'd associate with a cup of java.
- Cognac (#a2574f): Cognac brings in warm beige and chestnut undertones that parallel the warm, inviting appearance of freshly brewed coffee.
- Chocolate (#713600): With its deep, velvety richness, Chocolate mirrors the intense espresso shade of a well-crafted coffee.
To complement Coffee, consider pairing it with:
- Soft Pink (#E89EB8): Soft Pink adds a gentle, feminine contrast to Coffee’s rich tones, creating a balanced and inviting palette.
- Cream (#FDFBD4): Cream introduces a neutral, warm backdrop that accentuates Coffee’s earthy richness, enhancing a cozy and sophisticated look.
- Mint Green (#ADEBB3): Mint Green injects a refreshing and vibrant note, offering a lively contrast to the deep, mellow undertones of Coffee.
- Gold (#EFBF04): Gold brings a touch of elegance and warmth, complementing Coffee’s deep, roasted hues with a hint of luxury and shimmer.
- Sky Blue (#82C8E5): Sky Blue provides a cool, calming contrast, balancing Coffee’s robustness and creating a tranquil and harmonious combination.
While Coffee is a rich, deep shade, it may clash with:
- Neon Pink (#FF13F0): The high saturation and brightness of neon pink can create a jarring contrast against the muted, earthy tones of coffee.
- Cyan (#00FFFF): With its bright, cool hue, cyan sharply contrasts coffee's warmth and can feel unbalanced when paired together.
- Bright Yellow (#FFED29): This vivid shade can overwhelm coffee's more subdued richness, leading to a visually uncomfortable pairing.
- Neon Green (#2CFF05): The intense brightness of neon green can appear discordant when juxtaposed with coffee’s deep, mellow tone.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Cocoa Drift
Claywood Grove
Rustic Harmony
Contrast checker
Contrast 7.44
- Large Text
#6F4E37
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Contrast 2.82
- Large Text
#6F4E37
- 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 #6F4E37, known as Coffee, has RGB values of R:111, G:78, B:55 and CMYK values of C:0, M:30, Y:50, K:56.
| VALUE | CSS | |
|---|---|---|
| HEX | #6F4E37 | #6F4E37 |
| RGB DECIMAL | 111, 78, 55 | RGB(111,78,55) |
| RGB PERCENTAGE | 43.5, 30.6, 21.6 | RGB(43.5%,30.6%,21.6%) |
| CMYK | 0, 30, 50, 56 | |
| HSL | HSL(24.6, 33.7%, 32.5%) | HSL(24.6, 33.7%, 32.5%) |
| HSV (OR HSB) | 24.6°, 50.5, 43.5 | |
| WEB SAFE | #10210251 | #10210251 |
| BINARY | 01101111, 01001110, 00110111 | |
| iOS - SwiftUI | Color(red: 0.435, green: 0.306, blue: 0.216) | |
| iOS - UIKit | UIColor(red: 0.435, green: 0.306, blue: 0.216, alpha: 1) | |
| Android - Compose | Color(0xFF6F4E37) |
