← Back to Editor

#ACAD71 · #8FA06A · #848E5A · #58473F · #3C1822

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#ACAD71

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ACAD71
RGB
rgb(172, 173, 113)
HSL
hsl(61, 27%, 56%)
HSB
hsb(61, 35%, 68%)
CMYK
cmyk(1%, 0%, 35%, 32%)
Oklch
oklch(73.2% 0.080 109.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#8FA06A

Grass Green · Gray · Olive Green

HEX
#8FA06A
RGB
rgb(143, 160, 106)
HSL
hsl(79, 22%, 52%)
HSB
hsb(79, 34%, 63%)
CMYK
cmyk(11%, 0%, 34%, 37%)
Oklch
oklch(67.9% 0.077 122.7)

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

#848E5A

Grass Green · Gray · Olive Green

HEX
#848E5A
RGB
rgb(132, 142, 90)
HSL
hsl(72, 22%, 45%)
HSB
hsb(72, 37%, 56%)
CMYK
cmyk(7%, 0%, 37%, 44%)
Oklch
oklch(62.5% 0.074 117.5)

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

#58473F

Tangerine · DarkOliveGreen · Amber Brown

HEX
#58473F
RGB
rgb(88, 71, 63)
HSL
hsl(19, 17%, 30%)
HSB
hsb(19, 28%, 35%)
CMYK
cmyk(0%, 19%, 28%, 65%)
Oklch
oklch(41.3% 0.027 46.6)

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

#3C1822

Dark Violet · DarkSlateGray · Raspberry

HEX
#3C1822
RGB
rgb(60, 24, 34)
HSL
hsl(343, 43%, 16%)
HSB
hsb(343, 60%, 24%)
CMYK
cmyk(0%, 60%, 43%, 76%)
Oklch
oklch(26.6% 0.058 4.3)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ACAD71
7271AD

Analogous

AD9071
ACAD71
8EAD71

Triadic

ACAD71
71ACAD
AD71AC

Split-Comp.

ACAD71
718EAD
9071AD

Tetradic

ACAD71
71AD90
7271AD
AD718E

Contrast Matrix WCAG 2.1 Contrast

ACAD71
8FA06A
848E5A
58473F
3C1822
—
1.2
Fail
1.5
Fail
3.8
AA Large
6.7
AA
1.2
Fail
—
1.2
Fail
3.1
AA Large
5.5
AA
1.5
Fail
1.2
Fail
—
2.5
Fail
4.5
AA Large
3.8
AA Large
3.1
AA Large
2.5
Fail
—
1.8
Fail
6.7
AA
5.5
AA
4.5
AA Large
1.8
Fail
—
White BG
2.3Fail
2.8Fail
3.5AA Large
8.8AAA
15.6AAA
Black BG
9.0AAA
7.4AAA
6.0AA
2.4Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAC80
969777
888867
515041
2C2C20

Deuteranopia

ACAC83
95947A
88876A
525341
2F311F

Tritanopia

AC8B8E
908184
857173
574243
3A1E1D

Achromatopsia

A6A6A6
959595
858585
4B4B4B
242424

Shades & Tints Shades & Tints

#ACAD71

Dark
Light

#8FA06A

Dark
Light

#848E5A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #acad71;
  --color-2: #8fa06a;
  --color-3: #848e5a;
  --color-4: #58473f;
  --color-5: #3c1822;
}

SCSS

$color-1: #acad71;
$color-2: #8fa06a;
$color-3: #848e5a;
$color-4: #58473f;
$color-5: #3c1822;

TAILWIND

colors: {
  'brand-1': '#acad71',
  'brand-2': '#8fa06a',
  'brand-3': '#848e5a',
  'brand-4': '#58473f',
  'brand-5': '#3c1822',
}

RGB Array

[172, 173, 113], [143, 160, 106], [132, 142, 90], [88, 71, 63], [60, 24, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #ACAD71, #8FA06A, #848E5A, #58473F, #3C1822 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. 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: #acad71; --color-2: #8fa06a; --color-3: #848e5a; --color-4: #58473f; --color-5: #3c1822. 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. 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 finance, legal, luxury 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