← Back to Editor

#4C7744 · #D3CA9D · #C7BE91 · #B9B07F · #ACA274

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#4C7744

Celadon · DarkOliveGreen · Forest Green

HEX
#4C7744
RGB
rgb(76, 119, 68)
HSL
hsl(111, 27%, 37%)
HSB
hsb(111, 43%, 47%)
CMYK
cmyk(36%, 0%, 43%, 53%)
Oklch
oklch(52.4% 0.091 140.6)

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

#D3CA9D

Fresh Green · Tan · Sunflower

HEX
#D3CA9D
RGB
rgb(211, 202, 157)
HSL
hsl(50, 38%, 72%)
HSB
hsb(50, 26%, 83%)
CMYK
cmyk(0%, 4%, 26%, 17%)
Oklch
oklch(83.5% 0.061 98.1)

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

#C7BE91

Fresh Green · Tan · Sunflower

HEX
#C7BE91
RGB
rgb(199, 190, 145)
HSL
hsl(50, 33%, 67%)
HSB
hsb(50, 27%, 78%)
CMYK
cmyk(0%, 5%, 27%, 22%)
Oklch
oklch(79.8% 0.061 98.1)

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

#B9B07F

Fresh Green · Tan · Sunflower

HEX
#B9B07F
RGB
rgb(185, 176, 127)
HSL
hsl(51, 29%, 61%)
HSB
hsb(51, 31%, 73%)
CMYK
cmyk(0%, 5%, 31%, 27%)
Oklch
oklch(75.3% 0.067 99.0)

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

#ACA274

Ginger · DarkSeaGreen · Sunflower

HEX
#ACA274
RGB
rgb(172, 162, 116)
HSL
hsl(49, 25%, 56%)
HSB
hsb(49, 33%, 67%)
CMYK
cmyk(0%, 6%, 33%, 33%)
Oklch
oklch(70.9% 0.064 97.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4C7744
704578

Analogous

667845
4C7744
457857

Triadic

4C7744
454D78
78454D

Split-Comp.

4C7744
574578
784566

Tetradic

4C7744
456678
704578
785745

Contrast Matrix WCAG 2.1 Contrast

4C7744
D3CA9D
C7BE91
B9B07F
ACA274
—
3.2
AA Large
2.8
Fail
2.4
Fail
2.0
Fail
3.2
AA Large
—
1.1
Fail
1.3
Fail
1.6
Fail
2.8
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
2.4
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
2.0
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
White BG
5.2AA
1.7Fail
1.9Fail
2.2Fail
2.6Fail
Black BG
4.0AA Large
12.7AAA
11.2AAA
9.6AAA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5F50
CFCFA8
C3C39C
B5B58B
A8A87F

Deuteranopia

5C5953
D0D0AB
C4C49F
B6B68E
A8A982

Tritanopia

4E5A5C
D3B0B2
C7A4A6
B99496
AC888A

Achromatopsia

646464
C8C8C8
BCBCBC
ADADAD
A0A0A0

Shades & Tints Shades & Tints

#4C7744

Dark
Light

#D3CA9D

Dark
Light

#C7BE91

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4c7744;
  --color-2: #d3ca9d;
  --color-3: #c7be91;
  --color-4: #b9b07f;
  --color-5: #aca274;
}

SCSS

$color-1: #4c7744;
$color-2: #d3ca9d;
$color-3: #c7be91;
$color-4: #b9b07f;
$color-5: #aca274;

TAILWIND

colors: {
  'brand-1': '#4c7744',
  'brand-2': '#d3ca9d',
  'brand-3': '#c7be91',
  'brand-4': '#b9b07f',
  'brand-5': '#aca274',
}

RGB Array

[76, 119, 68], [211, 202, 157], [199, 190, 145], [185, 176, 127], [172, 162, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #4C7744, #D3CA9D, #C7BE91, #B9B07F, #ACA274 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: #4c7744; --color-2: #d3ca9d; --color-3: #c7be91; --color-4: #b9b07f; --color-5: #aca274. 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