← Back to Editor

#A3A658 · #F2E9D8 · #D9CF9C · #838C3F · #32220E

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

#A3A658

Autumn Sage · DarkSeaGreen · Honey Gold

HEX
#A3A658
RGB
rgb(163, 166, 88)
HSL
hsl(62, 31%, 50%)
HSB
hsb(62, 47%, 65%)
CMYK
cmyk(2%, 0%, 47%, 35%)
Oklch
oklch(70.5% 0.101 110.7)

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

#F2E9D8

Goose Yellow · Beige · Peach Orange

HEX
#F2E9D8
RGB
rgb(242, 233, 216)
HSL
hsl(39, 50%, 90%)
HSB
hsb(39, 11%, 95%)
CMYK
cmyk(0%, 4%, 11%, 5%)
Oklch
oklch(93.7% 0.025 83.4)

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

#D9CF9C

Fresh Green · BurlyWood · Sunflower

HEX
#D9CF9C
RGB
rgb(217, 207, 156)
HSL
hsl(50, 45%, 73%)
HSB
hsb(50, 28%, 85%)
CMYK
cmyk(0%, 5%, 28%, 15%)
Oklch
oklch(85.0% 0.068 98.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#838C3F

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#838C3F
RGB
rgb(131, 140, 63)
HSL
hsl(67, 38%, 40%)
HSB
hsb(67, 55%, 55%)
CMYK
cmyk(6%, 0%, 55%, 45%)
Oklch
oklch(61.6% 0.102 115.0)

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

#32220E

Ochre · Black · Cinnamon

HEX
#32220E
RGB
rgb(50, 34, 14)
HSL
hsl(33, 56%, 13%)
HSB
hsb(33, 72%, 20%)
CMYK
cmyk(0%, 32%, 72%, 80%)
Oklch
oklch(26.6% 0.040 70.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3A658
5B58A7

Analogous

A78258
A3A658
7DA758

Triadic

A3A658
58A4A7
A758A4

Split-Comp.

A3A658
587DA7
8258A7

Tetradic

A3A658
58A782
5B58A7
A7587D

Contrast Matrix WCAG 2.1 Contrast

A3A658
F2E9D8
D9CF9C
838C3F
32220E
—
2.1
Fail
1.6
Fail
1.4
Fail
5.9
AA
2.1
Fail
—
1.3
Fail
3.0
AA Large
12.7
AAA
1.6
Fail
1.3
Fail
—
2.3
Fail
9.7
AAA
1.4
Fail
3.0
AA Large
2.3
Fail
—
4.2
AA Large
5.9
AA
12.7
AAA
9.7
AAA
4.2
AA Large
—
White BG
2.6Fail
1.2Fail
1.6Fail
3.6AA Large
15.3AAA
Black BG
8.2AAA
17.4AAA
13.4AAA
5.8AA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A46B
EEEEDC
D5D5A8
878752
2B2B13

Deuteranopia

A4A46F
EFEFDD
D5D6AB
868656
2C2D14

Tritanopia

A37A7D
F2DFE0
D8B2B4
836064
311718

Achromatopsia

9C9C9C
EAEAEA
CCCCCC
818181
252525

Shades & Tints Shades & Tints

#A3A658

Dark
Light

#F2E9D8

Dark
Light

#D9CF9C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3a658;
  --color-2: #f2e9d8;
  --color-3: #d9cf9c;
  --color-4: #838c3f;
  --color-5: #32220e;
}

SCSS

$color-1: #a3a658;
$color-2: #f2e9d8;
$color-3: #d9cf9c;
$color-4: #838c3f;
$color-5: #32220e;

TAILWIND

colors: {
  'brand-1': '#a3a658',
  'brand-2': '#f2e9d8',
  'brand-3': '#d9cf9c',
  'brand-4': '#838c3f',
  'brand-5': '#32220e',
}

RGB Array

[163, 166, 88], [242, 233, 216], [217, 207, 156], [131, 140, 63], [50, 34, 14]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #A3A658, #F2E9D8, #D9CF9C, #838C3F, #32220E 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: #a3a658; --color-2: #f2e9d8; --color-3: #d9cf9c; --color-4: #838c3f; --color-5: #32220e. 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