← Back to Editor

#523A16 · #BD5B5B · #DDC39F · #785D2B · #A78B59

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

#523A16

Ochre · DarkOliveGreen · Cinnamon

HEX
#523A16
RGB
rgb(82, 58, 22)
HSL
hsl(36, 58%, 20%)
HSB
hsb(36, 73%, 32%)
CMYK
cmyk(0%, 29%, 73%, 68%)
Oklch
oklch(36.8% 0.061 74.7)

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

#BD5B5B

Crimson · Sienna · Passion Red

HEX
#BD5B5B
RGB
rgb(189, 91, 91)
HSL
hsl(0, 43%, 55%)
HSB
hsb(0, 52%, 74%)
CMYK
cmyk(0%, 52%, 52%, 26%)
Oklch
oklch(59.1% 0.127 21.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#DDC39F

Goose Yellow · BurlyWood · Warm Sun

HEX
#DDC39F
RGB
rgb(221, 195, 159)
HSL
hsl(35, 48%, 75%)
HSB
hsb(35, 28%, 87%)
CMYK
cmyk(0%, 12%, 28%, 13%)
Oklch
oklch(83.0% 0.056 75.8)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#785D2B

Ochre · DarkOliveGreen · Amber Brown

HEX
#785D2B
RGB
rgb(120, 93, 43)
HSL
hsl(39, 47%, 32%)
HSB
hsb(39, 64%, 47%)
CMYK
cmyk(0%, 22%, 64%, 53%)
Oklch
oklch(49.5% 0.076 80.9)

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

#A78B59

Ochre · Gray · Amber Brown

HEX
#A78B59
RGB
rgb(167, 139, 89)
HSL
hsl(38, 31%, 50%)
HSB
hsb(38, 47%, 65%)
CMYK
cmyk(0%, 17%, 47%, 35%)
Oklch
oklch(65.1% 0.075 81.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

523A16
152D51

Analogous

511B15
523A16
4B5115

Triadic

523A16
155139
391551

Split-Comp.

523A16
154B51
1B1551

Tetradic

523A16
15511B
152D51
51154B

Contrast Matrix WCAG 2.1 Contrast

523A16
BD5B5B
DDC39F
785D2B
A78B59
—
2.4
Fail
6.3
AA
1.7
Fail
3.3
AA Large
2.4
Fail
—
2.6
Fail
1.4
Fail
1.3
Fail
6.3
AA
2.6
Fail
—
3.6
AA Large
1.9
Fail
1.7
Fail
1.4
Fail
3.6
AA Large
—
1.9
Fail
3.3
AA Large
1.3
Fail
1.9
Fail
1.9
Fail
—
White BG
10.6AAA
4.4AA Large
1.7Fail
6.2AA
3.2AA Large
Black BG
2.0Fail
4.8AA
12.4AAA
3.4AA Large
6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

48471F
93925B
D2D2A8
6C6C37
9B9B65

Deuteranopia

494B21
98A05B
D3D5AA
6E703A
9D9F68

Tritanopia

512627
B85B5B
DCAFB0
774143
A66F71

Achromatopsia

3D3D3D
787878
C7C7C7
5F5F5F
8E8E8E

Shades & Tints Shades & Tints

#523A16

Dark
Light

#BD5B5B

Dark
Light

#DDC39F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #523a16;
  --color-2: #bd5b5b;
  --color-3: #ddc39f;
  --color-4: #785d2b;
  --color-5: #a78b59;
}

SCSS

$color-1: #523a16;
$color-2: #bd5b5b;
$color-3: #ddc39f;
$color-4: #785d2b;
$color-5: #a78b59;

TAILWIND

colors: {
  'brand-1': '#523a16',
  'brand-2': '#bd5b5b',
  'brand-3': '#ddc39f',
  'brand-4': '#785d2b',
  'brand-5': '#a78b59',
}

RGB Array

[82, 58, 22], [189, 91, 91], [221, 195, 159], [120, 93, 43], [167, 139, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #523A16, #BD5B5B, #DDC39F, #785D2B, #A78B59 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #523a16; --color-2: #bd5b5b; --color-3: #ddc39f; --color-4: #785d2b; --color-5: #a78b59. 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. 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