← Back to Editor

#4B2E17 · #330F13 · #734445 · #9A7141 · #DCCD9D

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

#4B2E17

Tangerine · DarkOliveGreen · Cinnamon

HEX
#4B2E17
RGB
rgb(75, 46, 23)
HSL
hsl(27, 53%, 19%)
HSB
hsb(27, 69%, 29%)
CMYK
cmyk(0%, 39%, 69%, 71%)
Oklch
oklch(33.1% 0.055 57.7)

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

#330F13

Crimson · Black · Deep Berry

HEX
#330F13
RGB
rgb(51, 15, 19)
HSL
hsl(353, 55%, 13%)
HSB
hsb(353, 71%, 20%)
CMYK
cmyk(0%, 71%, 63%, 80%)
Oklch
oklch(22.9% 0.058 16.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#734445

Crimson · DimGray · Wine Red

HEX
#734445
RGB
rgb(115, 68, 69)
HSL
hsl(359, 26%, 36%)
HSB
hsb(359, 41%, 45%)
CMYK
cmyk(0%, 41%, 40%, 55%)
Oklch
oklch(44.2% 0.065 18.7)

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

#9A7141

Ochre · Sienna · Amber Brown

HEX
#9A7141
RGB
rgb(154, 113, 65)
HSL
hsl(32, 41%, 43%)
HSB
hsb(32, 58%, 60%)
CMYK
cmyk(0%, 27%, 58%, 40%)
Oklch
oklch(57.9% 0.083 69.3)

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

#DCCD9D

Goose Yellow · BurlyWood · Sunflower

HEX
#DCCD9D
RGB
rgb(220, 205, 157)
HSL
hsl(46, 47%, 74%)
HSB
hsb(46, 29%, 86%)
CMYK
cmyk(0%, 7%, 29%, 14%)
Oklch
oklch(84.9% 0.065 92.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B2E17
17334A

Analogous

4A1719
4B2E17
4A4817

Triadic

4B2E17
174A2E
2E174A

Split-Comp.

4B2E17
174A48
17194A

Tetradic

4B2E17
194A17
17334A
48174A

Contrast Matrix WCAG 2.1 Contrast

4B2E17
330F13
734445
9A7141
DCCD9D
—
1.4
Fail
1.6
Fail
2.8
Fail
7.8
AAA
1.4
Fail
—
2.2
Fail
3.9
AA Large
10.9
AAA
1.6
Fail
2.2
Fail
—
1.8
Fail
5.0
AA
2.8
Fail
3.9
AA Large
1.8
Fail
—
2.8
Fail
7.8
AAA
10.9
AAA
5.0
AA
2.8
Fail
—
White BG
12.3AAA
17.2AAA
7.9AAA
4.4AA Large
1.6Fail
Black BG
1.7Fail
1.2Fail
2.6Fail
4.8AA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E1D
232312
5F5E45
88884D
D6D5A9

Deuteranopia

40421E
262812
616545
8B8E4F
D6D8AB

Tritanopia

4A2122
311111
714545
985658
DBB2B4

Achromatopsia

343434
1A1A1A
525252
787878
CCCCCC

Shades & Tints Shades & Tints

#4B2E17

Dark
Light

#330F13

Dark
Light

#734445

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b2e17;
  --color-2: #330f13;
  --color-3: #734445;
  --color-4: #9a7141;
  --color-5: #dccd9d;
}

SCSS

$color-1: #4b2e17;
$color-2: #330f13;
$color-3: #734445;
$color-4: #9a7141;
$color-5: #dccd9d;

TAILWIND

colors: {
  'brand-1': '#4b2e17',
  'brand-2': '#330f13',
  'brand-3': '#734445',
  'brand-4': '#9a7141',
  'brand-5': '#dccd9d',
}

RGB Array

[75, 46, 23], [51, 15, 19], [115, 68, 69], [154, 113, 65], [220, 205, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #4B2E17, #330F13, #734445, #9A7141, #DCCD9D is ideal for: tech websites, dark mode UIs, game UIs, 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: #4b2e17; --color-2: #330f13; --color-3: #734445; --color-4: #9a7141; --color-5: #dccd9d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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