#4E694D + #78A06C + #CFD16C + #CBE1A0 + #8DC56E · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGrounded

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#4E694D

Celadon · DarkOliveGreen · Forest Green

HEX

#4E694D

RGB

rgb(78, 105, 77)

HSL

hsl(118, 15%, 36%)

HSB

hsb(118, 27%, 41%)

CMYK

cmyk(26%, 0%, 27%, 59%)

Oklch

oklch(49.1% 0.054 143.8)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#78A06C

Celadon · Gray · Olive Green

HEX

#78A06C

RGB

rgb(120, 160, 108)

HSL

hsl(106, 21%, 53%)

HSB

hsb(106, 33%, 63%)

CMYK

cmyk(25%, 0%, 32%, 37%)

Oklch

oklch(66.3% 0.087 138.6)

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

#CFD16C

Fresh Green · BurlyWood · Sunflower

HEX

#CFD16C

RGB

rgb(207, 209, 108)

HSL

hsl(61, 52%, 62%)

HSB

hsb(61, 48%, 82%)

CMYK

cmyk(1%, 0%, 48%, 18%)

Oklch

oklch(83.8% 0.125 109.8)

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

#CBE1A0

Willow Green · Khaki · Apple Green

HEX

#CBE1A0

RGB

rgb(203, 225, 160)

HSL

hsl(80, 52%, 75%)

HSB

hsb(80, 29%, 88%)

CMYK

cmyk(10%, 0%, 29%, 12%)

Oklch

oklch(87.8% 0.089 123.4)

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

#8DC56E

Celadon · DarkSeaGreen · Olive Green

HEX

#8DC56E

RGB

rgb(141, 197, 110)

HSL

hsl(99, 43%, 60%)

HSB

hsb(99, 44%, 77%)

CMYK

cmyk(28%, 0%, 44%, 23%)

Oklch

oklch(76.4% 0.131 135.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4E694D

694E6A

Analogous

5D6A4E

4E694D

4E6A5B

Triadic

4E694D

4E4F6A

6A4E4F

Split-Comp.

4E694D

5B4E6A

6A4E5D

Tetradic

4E694D

4E5D6A

694E6A

6A5B4E

Contrast Matrix WCAG 2.1 Contrast

4E694D	78A06C	CFD16C	CBE1A0	8DC56E
—	2.0 Fail	3.8 AA Large	4.3 AA Large	3.0 Fail
2.0 Fail	—	1.8 Fail	2.1 Fail	1.5 Fail
3.8 AA Large	1.8 Fail	—	1.1 Fail	1.3 Fail
4.3 AA Large	2.1 Fail	1.1 Fail	—	1.4 Fail
3.0 Fail	1.5 Fail	1.3 Fail	1.4 Fail	—

White BG

6.1AA

3.0Fail

1.6Fail

1.4Fail

2.0Fail

Black BG

3.5AA Large

7.0AAA

13.0AAA

14.8AAA

10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A54

898A79

D0D084

D5D5B0

A5A683

Deuteranopia

585655

87847C

D0D08A

D3D2B4

A29E88

Tritanopia

4F595A

7A8385

CF989C

CCBCBF

909497

Achromatopsia

5E5E5E

8E8E8E

C5C5C5

D3D3D3

AAAAAA

Shades & Tints Shades & Tints

#4E694D

Dark

Light

#78A06C

Dark

Light

#CFD16C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4e694d;
  --color-2: #78a06c;
  --color-3: #cfd16c;
  --color-4: #cbe1a0;
  --color-5: #8dc56e;
}

SCSS

$color-1: #4e694d;
$color-2: #78a06c;
$color-3: #cfd16c;
$color-4: #cbe1a0;
$color-5: #8dc56e;

TAILWIND

colors: {
  'brand-1': '#4e694d',
  'brand-2': '#78a06c',
  'brand-3': '#cfd16c',
  'brand-4': '#cbe1a0',
  'brand-5': '#8dc56e',
}

RGB Array

[78, 105, 77], [120, 160, 108], [207, 209, 108], [203, 225, 160], [141, 197, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #4E694D, #78A06C, #CFD16C, #CBE1A0, #8DC56E 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: #4e694d; --color-2: #78a06c; --color-3: #cfd16c; --color-4: #cbe1a0; --color-5: #8dc56e. 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 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