← Back to Editor

#242118 · #67623A · #D2A95A · #7A350E · #451A0A

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

#242118

Ochre · Black · Amber Gold

HEX
#242118
RGB
rgb(36, 33, 24)
HSL
hsl(45, 20%, 12%)
HSB
hsb(45, 33%, 14%)
CMYK
cmyk(0%, 8%, 33%, 86%)
Oklch
oklch(24.8% 0.017 91.8)

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

#67623A

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#67623A
RGB
rgb(103, 98, 58)
HSL
hsl(53, 28%, 32%)
HSB
hsb(53, 44%, 40%)
CMYK
cmyk(0%, 5%, 44%, 60%)
Oklch
oklch(49.1% 0.058 102.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#D2A95A

Ginger · SandyBrown · Sunflower

HEX
#D2A95A
RGB
rgb(210, 169, 90)
HSL
hsl(40, 57%, 59%)
HSB
hsb(40, 57%, 82%)
CMYK
cmyk(0%, 20%, 57%, 18%)
Oklch
oklch(75.6% 0.109 82.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#7A350E

Tangerine · Brown · Amber Brown

HEX
#7A350E
RGB
rgb(122, 53, 14)
HSL
hsl(22, 79%, 27%)
HSB
hsb(22, 89%, 48%)
CMYK
cmyk(0%, 57%, 89%, 52%)
Oklch
oklch(41.7% 0.108 45.6)

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

#451A0A

Tangerine · Maroon · Cinnamon

HEX
#451A0A
RGB
rgb(69, 26, 10)
HSL
hsl(16, 75%, 15%)
HSB
hsb(16, 86%, 27%)
CMYK
cmyk(0%, 62%, 86%, 73%)
Oklch
oklch(28.0% 0.071 40.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

242118
181C25

Analogous

251C18
242118
222518

Triadic

242118
182522
221825

Split-Comp.

242118
182225
1C1825

Tetradic

242118
18251C
181C25
251822

Contrast Matrix WCAG 2.1 Contrast

242118
67623A
D2A95A
7A350E
451A0A
—
2.6
Fail
7.3
AAA
1.8
Fail
1.1
Fail
2.6
Fail
—
2.8
Fail
1.4
Fail
2.4
Fail
7.3
AAA
2.8
Fail
—
4.1
AA Large
6.8
AA
1.8
Fail
1.4
Fail
4.1
AA Large
—
1.7
Fail
1.1
Fail
2.4
Fail
6.8
AA
1.7
Fail
—
White BG
16.1AAA
6.2AA
2.2Fail
9.0AAA
14.9AAA
Black BG
1.3Fail
3.4AA Large
9.6AAA
2.3Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

23231A
656544
C0C06D
5C5C17
32320E

Deuteranopia

23231B
656646
C3C672
60651A
35380F

Tritanopia

241C1C
674B4D
D07C80
771F21
431112

Achromatopsia

212121
5F5F5F
ACACAC
454545
252525

Shades & Tints Shades & Tints

#242118

Dark
Light

#67623A

Dark
Light

#D2A95A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #242118;
  --color-2: #67623a;
  --color-3: #d2a95a;
  --color-4: #7a350e;
  --color-5: #451a0a;
}

SCSS

$color-1: #242118;
$color-2: #67623a;
$color-3: #d2a95a;
$color-4: #7a350e;
$color-5: #451a0a;

TAILWIND

colors: {
  'brand-1': '#242118',
  'brand-2': '#67623a',
  'brand-3': '#d2a95a',
  'brand-4': '#7a350e',
  'brand-5': '#451a0a',
}

RGB Array

[36, 33, 24], [103, 98, 58], [210, 169, 90], [122, 53, 14], [69, 26, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #242118, #67623A, #D2A95A, #7A350E, #451A0A 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: #242118; --color-2: #67623a; --color-3: #d2a95a; --color-4: #7a350e; --color-5: #451a0a. 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