← Back to Editor

#201714 · #3DD96E · #8A7C62 · #2E806B · #181303

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

#201714

Tangerine · Black · Cinnamon

HEX
#201714
RGB
rgb(32, 23, 20)
HSL
hsl(15, 23%, 10%)
HSB
hsb(15, 38%, 13%)
CMYK
cmyk(0%, 28%, 38%, 87%)
Oklch
oklch(21.5% 0.016 39.2)

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

#3DD96E

Emerald · MediumSeaGreen · Olive Green

HEX
#3DD96E
RGB
rgb(61, 217, 110)
HSL
hsl(139, 67%, 55%)
HSB
hsb(139, 72%, 85%)
CMYK
cmyk(72%, 0%, 49%, 15%)
Oklch
oklch(78.2% 0.196 149.4)

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

#8A7C62

Ochre · Gray · Amber Brown

HEX
#8A7C62
RGB
rgb(138, 124, 98)
HSL
hsl(39, 17%, 46%)
HSB
hsb(39, 29%, 54%)
CMYK
cmyk(0%, 10%, 29%, 46%)
Oklch
oklch(59.2% 0.041 82.9)

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

#2E806B

Mineral Blue · SeaGreen · Mint Ice

HEX
#2E806B
RGB
rgb(46, 128, 107)
HSL
hsl(165, 47%, 34%)
HSB
hsb(165, 64%, 50%)
CMYK
cmyk(64%, 0%, 16%, 50%)
Oklch
oklch(54.4% 0.086 173.0)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#181303

Ochre · Black · Amber Gold

HEX
#181303
RGB
rgb(24, 19, 3)
HSL
hsl(46, 78%, 5%)
HSB
hsb(46, 88%, 9%)
CMYK
cmyk(0%, 21%, 88%, 91%)
Oklch
oklch(18.8% 0.032 93.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

201714
141C1F

Analogous

1F1417
201714
1F1C14

Triadic

201714
141F17
17141F

Split-Comp.

201714
141F1C
14171F

Tetradic

201714
171F14
141C1F
1C141F

Contrast Matrix WCAG 2.1 Contrast

201714
3DD96E
8A7C62
2E806B
181303
—
9.5
AAA
4.3
AA Large
3.7
AA Large
1.1
Fail
9.5
AAA
—
2.2
Fail
2.6
Fail
10.0
AAA
4.3
AA Large
2.2
Fail
—
1.2
Fail
4.5
AA
3.7
AA Large
2.6
Fail
1.2
Fail
—
3.9
AA Large
1.1
Fail
10.0
AAA
4.5
AA
3.9
AA Large
—
White BG
17.6AAA
1.9Fail
4.1AA Large
4.8AA
18.5AAA
Black BG
1.2Fail
11.3AAA
5.1AA
4.4AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

1C1C15
818288
848468
525270
161607

Deuteranopia

1D1D15
786C8E
85866A
4D4771
161608

Tritanopia

201515
459CA1
896D6E
327475
180A0B

Achromatopsia

191919
9E9E9E
7D7D7D
656565
131313

Shades & Tints Shades & Tints

#201714

Dark
Light

#3DD96E

Dark
Light

#8A7C62

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #201714;
  --color-2: #3dd96e;
  --color-3: #8a7c62;
  --color-4: #2e806b;
  --color-5: #181303;
}

SCSS

$color-1: #201714;
$color-2: #3dd96e;
$color-3: #8a7c62;
$color-4: #2e806b;
$color-5: #181303;

TAILWIND

colors: {
  'brand-1': '#201714',
  'brand-2': '#3dd96e',
  'brand-3': '#8a7c62',
  'brand-4': '#2e806b',
  'brand-5': '#181303',
}

RGB Array

[32, 23, 20], [61, 217, 110], [138, 124, 98], [46, 128, 107], [24, 19, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #201714, #3DD96E, #8A7C62, #2E806B, #181303 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: #201714; --color-2: #3dd96e; --color-3: #8a7c62; --color-4: #2e806b; --color-5: #181303. 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