#77B29F + #9EA787 + #D5A866 + #DBC578 + #E9E4BF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#77B29F

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#77B29F

RGB

rgb(119, 178, 159)

HSL

hsl(161, 28%, 58%)

HSB

hsb(161, 33%, 70%)

CMYK

cmyk(33%, 0%, 11%, 30%)

Oklch

oklch(71.7% 0.068 172.1)

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

#9EA787

Grass Green · DarkSeaGreen · Olive Green

HEX

#9EA787

RGB

rgb(158, 167, 135)

HSL

hsl(77, 15%, 59%)

HSB

hsb(77, 19%, 65%)

CMYK

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

Oklch

oklch(71.2% 0.046 120.3)

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

#D5A866

Ginger · SandyBrown · Warm Sun

HEX

#D5A866

RGB

rgb(213, 168, 102)

HSL

hsl(36, 57%, 62%)

HSB

hsb(36, 52%, 84%)

CMYK

cmyk(0%, 21%, 52%, 16%)

Oklch

oklch(75.9% 0.099 75.9)

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

#DBC578

Ginger · BurlyWood · Sunflower

HEX

#DBC578

RGB

rgb(219, 197, 120)

HSL

hsl(47, 58%, 66%)

HSB

hsb(47, 45%, 86%)

CMYK

cmyk(0%, 10%, 45%, 14%)

Oklch

oklch(82.5% 0.100 94.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E9E4BF

Fresh Green · Wheat · Lemon Cream

HEX

#E9E4BF

RGB

rgb(233, 228, 191)

HSL

hsl(53, 49%, 83%)

HSB

hsb(53, 18%, 91%)

CMYK

cmyk(0%, 2%, 18%, 9%)

Oklch

oklch(91.3% 0.049 100.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

77B29F

B27689

Analogous

76B281

77B29F

76A7B2

Triadic

77B29F

9F76B2

B29F76

Split-Comp.

77B29F

B276A7

B28176

Tetradic

77B29F

8176B2

B27689

A7B276

Contrast Matrix WCAG 2.1 Contrast

77B29F	9EA787	D5A866	DBC578	E9E4BF
—	1.0 Fail	1.1 Fail	1.4 Fail	1.9 Fail
1.0 Fail	—	1.2 Fail	1.5 Fail	2.0 Fail
1.1 Fail	1.2 Fail	—	1.3 Fail	1.7 Fail
1.4 Fail	1.5 Fail	1.3 Fail	—	1.3 Fail
1.9 Fail	2.0 Fail	1.7 Fail	1.3 Fail	—

White BG

2.4Fail

2.5Fail

2.2Fail

1.7Fail

1.3Fail

Black BG

8.7AAA

8.3AAA

9.6AAA

12.3AAA

16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9191A4

A2A28F

C2C176

D1D18B

E7E7C8

Deuteranopia

8D89A5

A1A191

C4C87A

D3D48F

E7E8CA

Tritanopia

7AA7A8

9E9596

D38385

DA999D

E9CFD1

Achromatopsia

9E9E9E

A1A1A1

AEAEAE

C3C3C3

E1E1E1

Shades & Tints Shades & Tints

#77B29F

Dark

Light

#9EA787

Dark

Light

#D5A866

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #77b29f;
  --color-2: #9ea787;
  --color-3: #d5a866;
  --color-4: #dbc578;
  --color-5: #e9e4bf;
}

SCSS

$color-1: #77b29f;
$color-2: #9ea787;
$color-3: #d5a866;
$color-4: #dbc578;
$color-5: #e9e4bf;

TAILWIND

colors: {
  'brand-1': '#77b29f',
  'brand-2': '#9ea787',
  'brand-3': '#d5a866',
  'brand-4': '#dbc578',
  'brand-5': '#e9e4bf',
}

RGB Array

[119, 178, 159], [158, 167, 135], [213, 168, 102], [219, 197, 120], [233, 228, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #77B29F, #9EA787, #D5A866, #DBC578, #E9E4BF is ideal for: health products, baby brands, fresh-style blogs. 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: #77b29f; --color-2: #9ea787; --color-3: #d5a866; --color-4: #dbc578; --color-5: #e9e4bf. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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