#7EA69D + #9BA67E + #8C6D49 + #735431 + #5E411F · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7EA69D

Mineral Blue · LightSlateGray · Lake Green

HEX

#7EA69D

RGB

rgb(126, 166, 157)

HSL

hsl(167, 18%, 57%)

HSB

hsb(167, 24%, 65%)

CMYK

cmyk(24%, 0%, 5%, 35%)

Oklch

oklch(69.3% 0.045 179.5)

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

#9BA67E

Grass Green · DarkSeaGreen · Olive Green

HEX

#9BA67E

RGB

rgb(155, 166, 126)

HSL

hsl(77, 18%, 57%)

HSB

hsb(77, 24%, 65%)

CMYK

cmyk(7%, 0%, 24%, 35%)

Oklch

oklch(70.6% 0.057 120.4)

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

#8C6D49

Ochre · Sienna · Amber Brown

HEX

#8C6D49

RGB

rgb(140, 109, 73)

HSL

hsl(32, 31%, 42%)

HSB

hsb(32, 48%, 55%)

CMYK

cmyk(0%, 22%, 48%, 45%)

Oklch

oklch(55.7% 0.064 70.1)

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

#735431

Ochre · DarkOliveGreen · Amber Brown

HEX

#735431

RGB

rgb(115, 84, 49)

HSL

hsl(32, 40%, 32%)

HSB

hsb(32, 57%, 45%)

CMYK

cmyk(0%, 27%, 57%, 55%)

Oklch

oklch(47.0% 0.065 68.5)

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

#5E411F

Ochre · DarkOliveGreen · Cinnamon

HEX

#5E411F

RGB

rgb(94, 65, 31)

HSL

hsl(32, 50%, 25%)

HSB

hsb(32, 67%, 37%)

CMYK

cmyk(0%, 31%, 67%, 63%)

Oklch

oklch(40.0% 0.063 68.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7EA69D

A57E86

Analogous

7EA589

7EA69D

7E9AA5

Triadic

7EA69D

9D7EA5

A59D7E

Split-Comp.

7EA69D

A57E9A

A5897E

Tetradic

7EA69D

897EA5

A57E86

9AA57E

Contrast Matrix WCAG 2.1 Contrast

7EA69D	9BA67E	8C6D49	735431	5E411F
—	1.0 Fail	1.8 Fail	2.6 Fail	3.5 AA Large
1.0 Fail	—	1.9 Fail	2.7 Fail	3.6 AA Large
1.8 Fail	1.9 Fail	—	1.4 Fail	2.0 Fail
2.6 Fail	2.7 Fail	1.4 Fail	—	1.4 Fail
3.5 AA Large	3.6 AA Large	2.0 Fail	1.4 Fail	—

White BG

2.7Fail

2.6Fail

4.8AA

6.9AA

9.3AAA

Black BG

7.8AAA

8.1AAA

4.4AA Large

3.0AA Large

2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F909F

A0A088

7F7E52

666539

515127

Deuteranopia

8D8AA0

9F9E8A

808354

676A3C

535529

Tritanopia

80A1A1

9C8F91

8A595A

714042

5D2E2F

Achromatopsia

999999

9E9E9E

727272

595959

464646

Shades & Tints Shades & Tints

#7EA69D

Dark

Light

#9BA67E

Dark

Light

#8C6D49

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7ea69d;
  --color-2: #9ba67e;
  --color-3: #8c6d49;
  --color-4: #735431;
  --color-5: #5e411f;
}

SCSS

$color-1: #7ea69d;
$color-2: #9ba67e;
$color-3: #8c6d49;
$color-4: #735431;
$color-5: #5e411f;

TAILWIND

colors: {
  'brand-1': '#7ea69d',
  'brand-2': '#9ba67e',
  'brand-3': '#8c6d49',
  'brand-4': '#735431',
  'brand-5': '#5e411f',
}

RGB Array

[126, 166, 157], [155, 166, 126], [140, 109, 73], [115, 84, 49], [94, 65, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #7EA69D, #9BA67E, #8C6D49, #735431, #5E411F is ideal for: corporate websites, product showcases, portfolios. 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: #7ea69d; --color-2: #9ba67e; --color-3: #8c6d49; --color-4: #735431; --color-5: #5e411f. 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. 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