← Back to Editor

#473D2F · #70614C · #A5B88C · #9CE6B8 · #C0F0A3

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

#473D2F

Ochre · DarkSlateGray · Cinnamon

HEX
#473D2F
RGB
rgb(71, 61, 47)
HSL
hsl(35, 20%, 23%)
HSB
hsb(35, 34%, 28%)
CMYK
cmyk(0%, 14%, 34%, 72%)
Oklch
oklch(36.6% 0.027 76.0)

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

#70614C

Ochre · DimGray · Amber Brown

HEX
#70614C
RGB
rgb(112, 97, 76)
HSL
hsl(35, 19%, 37%)
HSB
hsb(35, 32%, 44%)
CMYK
cmyk(0%, 13%, 32%, 56%)
Oklch
oklch(50.1% 0.037 76.0)

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

#A5B88C

Willow Green · DarkSeaGreen · Apple Green

HEX
#A5B88C
RGB
rgb(165, 184, 140)
HSL
hsl(86, 24%, 64%)
HSB
hsb(86, 24%, 72%)
CMYK
cmyk(10%, 0%, 24%, 28%)
Oklch
oklch(75.6% 0.064 126.9)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#9CE6B8

Emerald · LightGreen · Apple Green

HEX
#9CE6B8
RGB
rgb(156, 230, 184)
HSL
hsl(143, 60%, 76%)
HSB
hsb(143, 32%, 90%)
CMYK
cmyk(32%, 0%, 20%, 10%)
Oklch
oklch(86.4% 0.098 156.4)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

#C0F0A3

Emerald · LightGreen · Apple Green

HEX
#C0F0A3
RGB
rgb(192, 240, 163)
HSL
hsl(97, 72%, 79%)
HSB
hsb(97, 32%, 94%)
CMYK
cmyk(20%, 0%, 32%, 6%)
Oklch
oklch(90.3% 0.113 134.2)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

473D2F
2F3946

Analogous

46312F
473D2F
44462F

Triadic

473D2F
2F463D
3D2F46

Split-Comp.

473D2F
2F4446
312F46

Tetradic

473D2F
2F4631
2F3946
462F44

Contrast Matrix WCAG 2.1 Contrast

473D2F
70614C
A5B88C
9CE6B8
C0F0A3
—
1.8
Fail
5.0
AA
7.3
AAA
8.2
AAA
1.8
Fail
—
2.8
Fail
4.1
AA Large
4.6
AA
5.0
AA
2.8
Fail
—
1.5
Fail
1.7
Fail
7.3
AAA
4.1
AA Large
1.5
Fail
—
1.1
Fail
8.2
AAA
4.6
AA
1.7
Fail
1.1
Fail
—
White BG
10.6AAA
6.0AA
2.1Fail
1.5Fail
1.3Fail
Black BG
2.0Fail
3.5AA Large
9.8AAA
14.4AAA
16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

434332
6A6951
ADAD97
BCBDC3
D5D5B6

Deuteranopia

434433
6A6B52
ACAB99
B8B2C6
D2CEBA

Tritanopia

473536
6F5556
A69FA1
A0CCCE
C2C4C8

Achromatopsia

3E3E3E
636363
ADADAD
CBCBCB
D9D9D9

Shades & Tints Shades & Tints

#473D2F

Dark
Light

#70614C

Dark
Light

#A5B88C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #473d2f;
  --color-2: #70614c;
  --color-3: #a5b88c;
  --color-4: #9ce6b8;
  --color-5: #c0f0a3;
}

SCSS

$color-1: #473d2f;
$color-2: #70614c;
$color-3: #a5b88c;
$color-4: #9ce6b8;
$color-5: #c0f0a3;

TAILWIND

colors: {
  'brand-1': '#473d2f',
  'brand-2': '#70614c',
  'brand-3': '#a5b88c',
  'brand-4': '#9ce6b8',
  'brand-5': '#c0f0a3',
}

RGB Array

[71, 61, 47], [112, 97, 76], [165, 184, 140], [156, 230, 184], [192, 240, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #473D2F, #70614C, #A5B88C, #9CE6B8, #C0F0A3 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: #473d2f; --color-2: #70614c; --color-3: #a5b88c; --color-4: #9ce6b8; --color-5: #c0f0a3. 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