Coffee meaning and palette guide
HEX
#6F4E37
RGB
111, 78, 55
HSL
25°, 34%, 33%
HSV
25°, 50%, 44%
The brown of morning ritual — warm, aromatic, and comfortably imperfect. #6F4E37 sits in the believable middle of "brewed" rather than "candy." It signals productivity and pause at the same time.
Best for
Conference materials, keynote visuals, and thought-leadership content.
Accessibility
White text on coffee passes AAA at 7.44:1, so it is safe for dark backgrounds and section headers.
How does coffee compare to nearby colors?
What is the difference between coffee and sepia?
Sepia (#704214) carries more pigment punch than Coffee (#6F4E37), so the pair separates by finish as much as hue. Coffee keeps the overall palette calmer, while Sepia introduces more visual insistence with less area. Choose coffee when the family should feel quieter, more material, or easier to live with across a full layout; use sepia when you need more punch.
What color is coffee?
Coffee brown anchors café identities, packaging for beans and instant drinks, and countless hospitality UI themes. It is also a common default for wood stains described as medium roast.
What is the hex code for coffee?
| Format | Value |
|---|---|
| HEX | #6F4E37 |
| RGB | rgb(111, 78, 55) |
| HSL | hsl(25°, 34%, 33%) |
| HSV / HSB | hsv(25°, 50%, 44%) |
| CMYK (approx.) | cmyk(0%, 30%, 50%, 56%) |
Convert Coffee to other color formats
Open the color converter with Coffee (#6F4E37) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Coffee in the color converter →What does coffee mean in design?
Coffee is often associated with focus, familiarity, and understated sophistication. Next to mocha it is typically deeper and less gray-muted; next to sienna it is usually less red.
How do I use coffee in code?
| CSS (hex) | color: #6F4E37; |
| CSS (rgb) | color: rgb(111, 78, 55); |
| CSS (hsl) | color: hsl(25, 34%, 33%); |
| RGB % | rgb(44%, 31%, 22%) |
| Tailwind | text-[#6F4E37] |
| SwiftUI | Color(red: 0.435, green: 0.306, blue: 0.216) |
| UIKit | UIColor(red: 0.435, green: 0.306, blue: 0.216, alpha: 1.0) |
| Android | Color.rgb(111, 78, 55) |
| Compose | Color(0xFF6F4E37) |
| Web Safe | #666633 |
Is coffee accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 7.44:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaBlack text on this color | 2.82:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on white | 7.44:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on black | 2.82: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 coffee look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with coffee
Pairing coffee with white preserves readable hierarchy while keeping the swatch itself as the clear focal color.
Navy blue reins in coffee without deadening it, which is useful when you want warmth to stay present but not dominate every part of the page.
Pairing coffee with charcoal adds useful depth while keeping the palette flexible for interfaces, decks, and editorial layouts.
Sage Green gives coffee a second note that is different enough to feel intentional but not so different that the palette loses coherence.
What colors clash with coffee
Against coffee, Neon Green introduces a fluorescent sports-drink brightness that overwhelms any quieter, tactile palette intention.
Magenta remaps coffee too aggressively, dragging it away from hospitality, food, and grounded heritage brands and into a brighter, more performative palette.
With coffee, cyan introduces a colder display-driven cast that strips away some of the source color's tactile character.
Pastel Pink can make coffee feel softer and sweeter than intended, which weakens palettes that rely on gravity or structure.
How should I use coffee in design?
- •Use coffee for headlines, sidebar accents, and key data points where you need strong presence without going full dark-mode.
- •Coffee leans warm, so cool counterparts like navy, teal, or slate create the cleanest contrast. For a softer, tonal look, stay within neighboring warm hues and let value differences do the work.
- •Coffee fits food packaging, hospitality branding, and editorial layouts where natural warmth and material texture are more important than synthetic brightness.
What are good coffee palettes?
Midnight authority
Conference materials, keynote visuals, and thought-leadership content.
Design with coffee in Moda
Create a presentation or document using coffee as your accent color. Moda's AI applies your color palette automatically.
Create a design with coffee →What are the shades and tints of coffee?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for coffee?
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
Umber
Umber sits close to coffee on the wheel, but it carries less chroma, which makes it better for steadier surfaces and calmer long-form use than for sharper emphasis and quicker visual pickup.
Taupe
Taupe stays very close to coffee in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Sepia
Sepia is almost the same hue as coffee; the real difference is value, with sepia feeling more grounded and anchor-ready.
Sienna
Sienna is almost the same hue as coffee; the real difference is value, with sienna feeling more open and surface-friendly.
Chestnut
Chestnut is almost the same hue as coffee; the real difference is value, with chestnut feeling more open and surface-friendly.
Frequently asked questions
What is the hex code for coffee?
The hex code for coffee is #6F4E37. In RGB, that's 111 red, 78 green, and 55 blue. The approximate CMYK equivalent is 0% cyan, 30% magenta, 50% yellow, and 56% key (black).
Is coffee a warm or cool color?
Coffee 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.
Is coffee better for accents, structure, or surfaces?
Coffee sits in the usable middle: strong enough to anchor a section or call attention to a key moment, but calm enough to support a broader system when the surrounding values are well managed.
Where does coffee work best in a layout?
Coffee sits in the middle of the spectrum in a useful way: strong enough for emphasis, but controlled enough to support a broader brand or presentation system when the contrast is handled well.
Is coffee accessible?
Coffee is strong enough for white text at 7.44: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
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Brown colors
Compare coffee 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.