#78A28E + #B8C8A1 + #CFDAB0 + #DFE4CD + #D5D49C · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#78A28E

Mineral Blue · LightSlateGray · Olive Green

HEX

#78A28E

RGB

rgb(120, 162, 142)

HSL

hsl(151, 18%, 55%)

HSB

hsb(151, 26%, 64%)

CMYK

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

Oklch

oklch(67.6% 0.054 164.0)

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

#B8C8A1

Willow Green · Silver · Apple Green

HEX

#B8C8A1

RGB

rgb(184, 200, 161)

HSL

hsl(85, 26%, 71%)

HSB

hsb(85, 20%, 78%)

CMYK

cmyk(8%, 0%, 20%, 22%)

Oklch

oklch(81.0% 0.056 125.8)

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

#CFDAB0

Willow Green · Silver · Apple Green

HEX

#CFDAB0

RGB

rgb(207, 218, 176)

HSL

hsl(76, 36%, 77%)

HSB

hsb(76, 19%, 85%)

CMYK

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

Oklch

oklch(86.9% 0.057 119.5)

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

#DFE4CD

Willow Green · LightGray · Mint Green

HEX

#DFE4CD

RGB

rgb(223, 228, 205)

HSL

hsl(73, 30%, 85%)

HSB

hsb(73, 10%, 89%)

CMYK

cmyk(2%, 0%, 10%, 11%)

Oklch

oklch(90.9% 0.031 117.0)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#D5D49C

Fresh Green · Tan · Sunflower

HEX

#D5D49C

RGB

rgb(213, 212, 156)

HSL

hsl(59, 40%, 72%)

HSB

hsb(59, 27%, 84%)

CMYK

cmyk(0%, 0%, 27%, 16%)

Oklch

oklch(85.7% 0.073 107.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

78A28E

A1788C

Analogous

78A178

78A28E

78A0A1

Triadic

78A28E

8D78A1

A18D78

Split-Comp.

78A28E

A178A0

A17878

Tetradic

78A28E

7878A1

A1788C

A0A178

Contrast Matrix WCAG 2.1 Contrast

78A28E	B8C8A1	CFDAB0	DFE4CD	D5D49C
—	1.6 Fail	1.9 Fail	2.2 Fail	1.9 Fail
1.6 Fail	—	1.2 Fail	1.4 Fail	1.2 Fail
1.9 Fail	1.2 Fail	—	1.1 Fail	1.0 Fail
2.2 Fail	1.4 Fail	1.1 Fail	—	1.2 Fail
1.9 Fail	1.2 Fail	1.0 Fail	1.2 Fail	—

White BG

2.9Fail

1.8Fail

1.5Fail

1.3Fail

1.5Fail

Black BG

7.4AAA

11.8AAA

14.3AAA

16.1AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8B93

BFBFAA

D4D4BA

E1E1D3

D5D5AA

Deuteranopia

888594

BEBDAD

D3D2BD

E1E1D4

D5D5AD

Tritanopia

7A9798

B9B2B4

D0C2C4

DFD7D8

D5B4B7

Achromatopsia

939393

BFBFBF

D2D2D2

E0E0E0

CECECE

Shades & Tints Shades & Tints

#78A28E

Dark

Light

#B8C8A1

Dark

Light

#CFDAB0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #78a28e;
  --color-2: #b8c8a1;
  --color-3: #cfdab0;
  --color-4: #dfe4cd;
  --color-5: #d5d49c;
}

SCSS

$color-1: #78a28e;
$color-2: #b8c8a1;
$color-3: #cfdab0;
$color-4: #dfe4cd;
$color-5: #d5d49c;

TAILWIND

colors: {
  'brand-1': '#78a28e',
  'brand-2': '#b8c8a1',
  'brand-3': '#cfdab0',
  'brand-4': '#dfe4cd',
  'brand-5': '#d5d49c',
}

RGB Array

[120, 162, 142], [184, 200, 161], [207, 218, 176], [223, 228, 205], [213, 212, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #78A28E, #B8C8A1, #CFDAB0, #DFE4CD, #D5D49C 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: #78a28e; --color-2: #b8c8a1; --color-3: #cfdab0; --color-4: #dfe4cd; --color-5: #d5d49c. 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 nature-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