#5E7D6E + #DFB779 + #6B8B7C + #77A18D + #DB4E3C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5E7D6E

Mineral Blue · DimGray · Olive Green

HEX

#5E7D6E

RGB

rgb(94, 125, 110)

HSL

hsl(151, 14%, 43%)

HSB

hsb(151, 25%, 49%)

CMYK

cmyk(25%, 0%, 12%, 51%)

Oklch

oklch(56.1% 0.042 163.8)

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

#DFB779

Ginger · BurlyWood · Warm Sun

HEX

#DFB779

RGB

rgb(223, 183, 121)

HSL

hsl(36, 61%, 67%)

HSB

hsb(36, 46%, 87%)

CMYK

cmyk(0%, 18%, 46%, 13%)

Oklch

oklch(80.1% 0.092 77.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#6B8B7C

Mineral Blue · SlateGray · Olive Green

HEX

#6B8B7C

RGB

rgb(107, 139, 124)

HSL

hsl(152, 13%, 48%)

HSB

hsb(152, 23%, 55%)

CMYK

cmyk(23%, 0%, 11%, 45%)

Oklch

oklch(60.8% 0.043 164.7)

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

#77A18D

Mineral Blue · LightSlateGray · Olive Green

HEX

#77A18D

RGB

rgb(119, 161, 141)

HSL

hsl(151, 18%, 55%)

HSB

hsb(151, 26%, 63%)

CMYK

cmyk(26%, 0%, 12%, 37%)

Oklch

oklch(67.2% 0.055 164.0)

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

#DB4E3C

Vermilion · Chocolate · Passion Red

HEX

#DB4E3C

RGB

rgb(219, 78, 60)

HSL

hsl(7, 69%, 55%)

HSB

hsb(7, 73%, 86%)

CMYK

cmyk(0%, 64%, 73%, 14%)

Oklch

oklch(61.4% 0.180 30.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E7D6E

7D5E6D

Analogous

5E7D5F

5E7D6E

5E7C7D

Triadic

5E7D6E

6E5E7D

7D6E5E

Split-Comp.

5E7D6E

7D5E7C

7D5F5E

Tetradic

5E7D6E

5F5E7D

7D5E6D

7C7D5E

Contrast Matrix WCAG 2.1 Contrast

5E7D6E	DFB779	6B8B7C	77A18D	DB4E3C
—	2.4 Fail	1.2 Fail	1.6 Fail	1.1 Fail
2.4 Fail	—	2.0 Fail	1.5 Fail	2.2 Fail
1.2 Fail	2.0 Fail	—	1.3 Fail	1.1 Fail
1.6 Fail	1.5 Fail	1.3 Fail	—	1.4 Fail
1.1 Fail	2.2 Fail	1.1 Fail	1.4 Fail	—

White BG

4.5AA

1.9Fail

3.7AA Large

2.9Fail

4.1AA Large

Black BG

4.6AA

11.2AAA

5.6AA

7.3AAA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6C72

CECD88

797980

898A92

9E9D40

Deuteranopia

6A6773

D0D38C

777581

878493

A6B141

Tritanopia

607475

DD9496

6D8283

799697

D44445

Achromatopsia

727272

BCBCBC

808080

929292

767676

Shades & Tints Shades & Tints

#5E7D6E

Dark

Light

#DFB779

Dark

Light

#6B8B7C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e7d6e;
  --color-2: #dfb779;
  --color-3: #6b8b7c;
  --color-4: #77a18d;
  --color-5: #db4e3c;
}

SCSS

$color-1: #5e7d6e;
$color-2: #dfb779;
$color-3: #6b8b7c;
$color-4: #77a18d;
$color-5: #db4e3c;

TAILWIND

colors: {
  'brand-1': '#5e7d6e',
  'brand-2': '#dfb779',
  'brand-3': '#6b8b7c',
  'brand-4': '#77a18d',
  'brand-5': '#db4e3c',
}

RGB Array

[94, 125, 110], [223, 183, 121], [107, 139, 124], [119, 161, 141], [219, 78, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5E7D6E, #DFB779, #6B8B7C, #77A18D, #DB4E3C 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: #5e7d6e; --color-2: #dfb779; --color-3: #6b8b7c; --color-4: #77a18d; --color-5: #db4e3c. 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 general-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