← Back to Editor

#564032 · #3D3326 · #6D8165 · #E0CFB5 · #937A66

coffee

A 5-color coffee palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#564032

Tangerine · DarkOliveGreen · Amber Brown

HEX
#564032
RGB
rgb(86, 64, 50)
HSL
hsl(23, 26%, 27%)
HSB
hsb(23, 42%, 34%)
CMYK
cmyk(0%, 26%, 42%, 66%)
Oklch
oklch(39.2% 0.038 53.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#3D3326

Ochre · DarkSlateGray · Cinnamon

HEX
#3D3326
RGB
rgb(61, 51, 38)
HSL
hsl(34, 23%, 19%)
HSB
hsb(34, 38%, 24%)
CMYK
cmyk(0%, 16%, 38%, 76%)
Oklch
oklch(32.8% 0.026 74.0)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#6D8165

Celadon · DimGray · Olive Green

HEX
#6D8165
RGB
rgb(109, 129, 101)
HSL
hsl(103, 12%, 45%)
HSB
hsb(103, 22%, 51%)
CMYK
cmyk(16%, 0%, 22%, 49%)
Oklch
oklch(57.9% 0.048 136.8)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#E0CFB5

Goose Yellow · Wheat · Peach Orange

HEX
#E0CFB5
RGB
rgb(224, 207, 181)
HSL
hsl(36, 41%, 79%)
HSB
hsb(36, 19%, 88%)
CMYK
cmyk(0%, 8%, 19%, 12%)
Oklch
oklch(86.2% 0.040 78.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#937A66

Tangerine · Gray · Amber Brown

HEX
#937A66
RGB
rgb(147, 122, 102)
HSL
hsl(27, 18%, 49%)
HSB
hsb(27, 31%, 58%)
CMYK
cmyk(0%, 17%, 31%, 42%)
Oklch
oklch(59.8% 0.043 60.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

564032
334957

Analogous

573337
564032
575333

Triadic

564032
335741
413357

Split-Comp.

564032
335753
333757

Tetradic

564032
375733
334957
533357

Contrast Matrix WCAG 2.1 Contrast

564032
3D3326
6D8165
E0CFB5
937A66
—
1.3
Fail
2.3
Fail
6.3
AA
2.4
Fail
1.3
Fail
—
2.9
Fail
8.1
AAA
3.1
AA Large
2.3
Fail
2.9
Fail
—
2.8
Fail
1.0
Fail
6.3
AA
8.1
AAA
2.8
Fail
—
2.6
Fail
2.4
Fail
3.1
AA Large
1.0
Fail
2.6
Fail
—
White BG
9.7AAA
12.4AAA
4.2AA Large
1.5Fail
4.0AA Large
Black BG
2.2Fail
1.7Fail
5.0AA
13.8AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4C35
393929
76766C
D9D8BB
88886B

Deuteranopia

4E4F36
393A2A
75736D
DADBBD
8A8C6C

Tritanopia

553839
3C2C2C
6E7172
DFC0C1
926F70

Achromatopsia

454545
353535
787878
D1D1D1
7F7F7F

Shades & Tints Shades & Tints

#564032

Dark
Light

#3D3326

Dark
Light

#6D8165

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #564032;
  --color-2: #3d3326;
  --color-3: #6d8165;
  --color-4: #e0cfb5;
  --color-5: #937a66;
}

SCSS

$color-1: #564032;
$color-2: #3d3326;
$color-3: #6d8165;
$color-4: #e0cfb5;
$color-5: #937a66;

TAILWIND

colors: {
  'brand-1': '#564032',
  'brand-2': '#3d3326',
  'brand-3': '#6d8165',
  'brand-4': '#e0cfb5',
  'brand-5': '#937a66',
}

RGB Array

[86, 64, 50], [61, 51, 38], [109, 129, 101], [224, 207, 181], [147, 122, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #564032, #3D3326, #6D8165, #E0CFB5, #937A66 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #564032; --color-2: #3d3326; --color-3: #6d8165; --color-4: #e0cfb5; --color-5: #937a66. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This coffee-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color