← Back to Editor

#3A1910 · #78BAA1 · #8DBCAA · #D2DECA · #DFE6DA

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#3A1910

Crimson · Black · Deep Berry

HEX
#3A1910
RGB
rgb(58, 25, 16)
HSL
hsl(13, 57%, 15%)
HSB
hsb(13, 72%, 23%)
CMYK
cmyk(0%, 57%, 72%, 77%)
Oklch
oklch(25.9% 0.055 36.2)

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

#78BAA1

Mineral Blue · MediumAquaMarine · Olive Green

HEX
#78BAA1
RGB
rgb(120, 186, 161)
HSL
hsl(157, 32%, 60%)
HSB
hsb(157, 35%, 73%)
CMYK
cmyk(35%, 0%, 13%, 27%)
Oklch
oklch(73.7% 0.077 168.3)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#8DBCAA

Jade · DarkSeaGreen · Apple Green

HEX
#8DBCAA
RGB
rgb(141, 188, 170)
HSL
hsl(157, 26%, 65%)
HSB
hsb(157, 25%, 74%)
CMYK
cmyk(25%, 0%, 10%, 26%)
Oklch
oklch(75.7% 0.056 169.3)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#D2DECA

Celadon · LightGray · Mint Green

HEX
#D2DECA
RGB
rgb(210, 222, 202)
HSL
hsl(96, 23%, 83%)
HSB
hsb(96, 9%, 87%)
CMYK
cmyk(5%, 0%, 9%, 13%)
Oklch
oklch(88.6% 0.030 132.6)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#DFE6DA

Celadon · LightGray · Mint Green

HEX
#DFE6DA
RGB
rgb(223, 230, 218)
HSL
hsl(95, 19%, 88%)
HSB
hsb(95, 5%, 90%)
CMYK
cmyk(3%, 0%, 5%, 10%)
Oklch
oklch(91.6% 0.018 131.9)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A1910
10333C

Analogous

3C101D
3A1910
3C3010

Triadic

3A1910
103C1A
1A103C

Split-Comp.

3A1910
103C30
101D3C

Tetradic

3A1910
1D3C10
10333C
30103C

Contrast Matrix WCAG 2.1 Contrast

3A1910
78BAA1
8DBCAA
D2DECA
DFE6DA
—
7.0
AAA
7.5
AAA
11.3
AAA
12.4
AAA
7.0
AAA
—
1.1
Fail
1.6
Fail
1.8
Fail
7.5
AAA
1.1
Fail
—
1.5
Fail
1.7
Fail
11.3
AAA
1.6
Fail
1.5
Fail
—
1.1
Fail
12.4
AAA
1.8
Fail
1.7
Fail
1.1
Fail
—
White BG
15.8AAA
2.2Fail
2.1Fail
1.4Fail
1.3Fail
Black BG
1.3Fail
9.3AAA
9.9AAA
15.0AAA
16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2B12
9595A7
A1A2AE
D7D7CF
E2E2DD

Deuteranopia

2E3013
918CA9
9F9BAF
D7D6D0
E2E1DE

Tritanopia

381414
7BACAD
8FB2B3
D3D3D4
DFDFE0

Achromatopsia

222222
A3A3A3
ACACAC
D8D8D8
E3E3E3

Shades & Tints Shades & Tints

#3A1910

Dark
Light

#78BAA1

Dark
Light

#8DBCAA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a1910;
  --color-2: #78baa1;
  --color-3: #8dbcaa;
  --color-4: #d2deca;
  --color-5: #dfe6da;
}

SCSS

$color-1: #3a1910;
$color-2: #78baa1;
$color-3: #8dbcaa;
$color-4: #d2deca;
$color-5: #dfe6da;

TAILWIND

colors: {
  'brand-1': '#3a1910',
  'brand-2': '#78baa1',
  'brand-3': '#8dbcaa',
  'brand-4': '#d2deca',
  'brand-5': '#dfe6da',
}

RGB Array

[58, 25, 16], [120, 186, 161], [141, 188, 170], [210, 222, 202], [223, 230, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #3A1910, #78BAA1, #8DBCAA, #D2DECA, #DFE6DA 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: #3a1910; --color-2: #78baa1; --color-3: #8dbcaa; --color-4: #d2deca; --color-5: #dfe6da. 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