#77C4B0 + #86B690 + #94AA7C + #A7835F + #D14F6E · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#77C4B0

Jade · MediumAquaMarine · Lake Green

HEX

#77C4B0

RGB

rgb(119, 196, 176)

HSL

hsl(164, 39%, 62%)

HSB

hsb(164, 39%, 77%)

CMYK

cmyk(39%, 0%, 10%, 23%)

Oklch

oklch(76.5% 0.082 175.6)

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

#86B690

Celadon · DarkSeaGreen · Apple Green

HEX

#86B690

RGB

rgb(134, 182, 144)

HSL

hsl(133, 25%, 62%)

HSB

hsb(133, 26%, 71%)

CMYK

cmyk(26%, 0%, 21%, 29%)

Oklch

oklch(73.2% 0.075 150.6)

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

#94AA7C

Grass Green · DarkSeaGreen · Olive Green

HEX

#94AA7C

RGB

rgb(148, 170, 124)

HSL

hsl(89, 21%, 58%)

HSB

hsb(89, 27%, 67%)

CMYK

cmyk(13%, 0%, 27%, 33%)

Oklch

oklch(70.9% 0.069 128.8)

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

#A7835F

Ginger · Gray · Warm Sun

HEX

#A7835F

RGB

rgb(167, 131, 95)

HSL

hsl(30, 29%, 51%)

HSB

hsb(30, 43%, 65%)

CMYK

cmyk(0%, 22%, 43%, 35%)

Oklch

oklch(63.6% 0.067 66.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#D14F6E

Crimson · LightCoral · Passion Red

HEX

#D14F6E

RGB

rgb(209, 79, 110)

HSL

hsl(346, 59%, 56%)

HSB

hsb(346, 62%, 82%)

CMYK

cmyk(0%, 62%, 47%, 18%)

Oklch

oklch(60.9% 0.165 8.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

77C4B0

C4788C

Analogous

78C48A

77C4B0

78B2C4

Triadic

77C4B0

B078C4

C4B078

Split-Comp.

77C4B0

C478B2

C48A78

Tetradic

77C4B0

8A78C4

C4788C

B2C478

Contrast Matrix WCAG 2.1 Contrast

77C4B0	86B690	94AA7C	A7835F	D14F6E
—	1.1 Fail	1.2 Fail	1.7 Fail	2.0 Fail
1.1 Fail	—	1.1 Fail	1.5 Fail	1.8 Fail
1.2 Fail	1.1 Fail	—	1.4 Fail	1.6 Fail
1.7 Fail	1.5 Fail	1.4 Fail	—	1.2 Fail
2.0 Fail	1.8 Fail	1.6 Fail	1.2 Fail	—

White BG

2.0Fail

2.3Fail

2.5Fail

3.5AA Large

4.2AA Large

Black BG

10.3AAA

9.1AAA

8.3AAA

6.1AA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9899B5

9B9B99

9E9E87

979768

999866

Deuteranopia

948EB6

98949B

9C9B8A

9A9C6A

A0AA65

Tritanopia

7BB9BA

88A0A2

959092

A56F70

CA615F

Achromatopsia

ABABAB

A3A3A3

9E9E9E

8A8A8A

797979

Shades & Tints Shades & Tints

#77C4B0

Dark

Light

#86B690

Dark

Light

#94AA7C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #77c4b0;
  --color-2: #86b690;
  --color-3: #94aa7c;
  --color-4: #a7835f;
  --color-5: #d14f6e;
}

SCSS

$color-1: #77c4b0;
$color-2: #86b690;
$color-3: #94aa7c;
$color-4: #a7835f;
$color-5: #d14f6e;

TAILWIND

colors: {
  'brand-1': '#77c4b0',
  'brand-2': '#86b690',
  'brand-3': '#94aa7c',
  'brand-4': '#a7835f',
  'brand-5': '#d14f6e',
}

RGB Array

[119, 196, 176], [134, 182, 144], [148, 170, 124], [167, 131, 95], [209, 79, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #77C4B0, #86B690, #94AA7C, #A7835F, #D14F6E 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: #77c4b0; --color-2: #86b690; --color-3: #94aa7c; --color-4: #a7835f; --color-5: #d14f6e. 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 earth-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