Cocoa #6f4e37

Brown at drinking temperature.

RGB

111, 78, 55

HSL

25°, 34%, 33%

CMYK

0, 30, 51, 57

Luminance

0.0910

About Cocoa

Cocoa, #6f4e37, is brown steamed with comfort — the cup, not the bar. Warmer than coffee’s near-black, milkier than chocolate’s glaze, cocoa is winter’s interior color.

History

Cacao was Mesoamerican currency and ceremony; Europe sweetened it into drawing-room fashion; Crayola’s “cocoa” fixed the fireside register. Ski-lodge and hygge aesthetics keep it seasonal royalty.

Psychology

Cocoa reads nurturing, unhurried and indoors — the psychological blanket of browns. Food, knitwear and cabin branding pour it annually.

In design

Cocoa is a warm dark neutral: fine ink on cream (8.1:1 on white), lush as surfaces under ivory type. Pair with marshmallow whites, caramel, forest and burgundy — the entire winter-menu palette.

In culture

Cocoa by the fire, cocoa-butter warmth, the ceremonial cacao revival: the bean keeps both ritual and comfort registers alive.

Brands that own cocoa

Swiss Miss kin#7a5230 Hot chocolate menus#6f4e37 Crayola cocoa kin#6b4f3a Knitwear autumn#7d5a44 Cabin hospitality#5e4330

Shades of cocoa

Coffee Chocolate Espresso Caramel Taupe Umber Mocha Cinnamon

Every format

HEX	#6f4e37
RGB	rgb(111, 78, 55)
HSL	hsl(25, 34%, 33%)
CMYK	cmyk(0%, 30%, 51%, 57%)
LAB	lab(36.2 10.9 19.1)
LCH	lch(36.2 22.0 60.4)
OKLCH	oklch(0.454 0.057 55.6)

Copy-ready code

/* CSS */
color: #6f4e37;
background-color: #6f4e37;
/* Tailwind (arbitrary) */
class="text-[#6f4e37] bg-[#6f4e37]"
/* SCSS */
$brand: #6f4e37;
/* SwiftUI */
Color(red: 0.435, green: 0.306, blue: 0.216)
/* Android */
Color.parseColor("#6f4e37")

Accessibility — WCAG contrast

#6f4e37 on white: 7.44:1

AA ✓ pass · AA-large ✓ · AAA ✓

#6f4e37 on black: 2.82:1

AA ✗ fail · AA-large ✗ · AAA ✗

true color

protanopia

deuteranopia

tritanopia

RGB percentages

Red43.5%

Green30.6%

Blue21.6%

CMYK percentages

Cyan0.0%

Magenta29.7%

Yellow50.5%

Key (black)56.5%

Color previews

#6f4e37 text on a black background

contrast 2.82:1

Card sample

#6f4e37 text on a white background

contrast 7.44:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #6f4e37;

Background color

Panel with #6f4e37 background

background-color: #6f4e37;

Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #6f4e37;

Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(111, 78, 55, 0.45);

Div box shadow

Elevated card

box-shadow: 0 12px 32px -8px rgba(111, 78, 55, 0.45);

Border & gradient

Gradient panel

border: 3px solid #6f4e37;
background: linear-gradient(135deg, #6f4e37, #6B6F37);

Monochromatic scale

#291D14 #593E2C #886044 #B18362 #C9A892 #E1CEC2 #F1E9E4

Palettes built from #6f4e37

UI palette

Gradient stops

Accent trio

Warm–cool bridge

Shades — darker

#644631 #593E2C #4E3626 #422F21 #37271B #2C1F16 #211710 #16100B #0B0805

Tints — lighter

#865E42 #9D6E4E #AF7F5E #BB9175 #C6A48C #D1B6A3 #DDC8BA #E8DAD1 #F4EDE8

Hue & tone neighbors

#6F3B37 #6F4537 #6F5737 #6F6037 #916648 #4D3626 #7F4B26 #5E5148

Color harmonies

Complement

Split-complement

Analogous

Triadic

Tetradic

Nearest named colors

sienna · ΔE 25.9 gray · ΔE 28.0 darkslategray · ΔE 32.5 tan · ΔE 39.6 peru · ΔE 39.9

Cocoa, answered

What is the hex code for cocoa?

Cocoa is #6f4e37 (shared with CSS-adjacent “coffee”); mocha lightens to #967969, espresso darkens to #3c2a21.

Cocoa vs chocolate vs coffee?

Chocolate (CSS #d2691e) is oddly orange; cocoa is the drink’s milky brown; coffee/espresso run darker and grayer. The cup defines the hue.

What pairs with cocoa?

Marshmallow cream, caramel, forest green and burgundy — winter’s menu; denim and mustard for autumn wardrobe.

Work with #6f4e37 in the Color Lab

Contrast Checker →Palette Generator →Palette Pro →Scale Generator →CSS Code Generator →Color Blind Simulator →Accessibility Checker →Color Distance →