← Back to Editor

#809AA4 · #D7C87A · #E5E2BB · #D68651 · #58544A

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#809AA4

Slate Blue · LightSlateGray · Lake Green

HEX
#809AA4
RGB
rgb(128, 154, 164)
HSL
hsl(197, 17%, 57%)
HSB
hsb(197, 22%, 64%)
CMYK
cmyk(22%, 6%, 0%, 36%)
Oklch
oklch(67.0% 0.033 223.1)

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

#D7C87A

Fresh Green · BurlyWood · Sunflower

HEX
#D7C87A
RGB
rgb(215, 200, 122)
HSL
hsl(50, 54%, 66%)
HSB
hsb(50, 43%, 84%)
CMYK
cmyk(0%, 7%, 43%, 16%)
Oklch
oklch(82.8% 0.100 98.7)

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

#E5E2BB

Fresh Green · Wheat · Lemon Cream

HEX
#E5E2BB
RGB
rgb(229, 226, 187)
HSL
hsl(56, 45%, 82%)
HSB
hsb(56, 18%, 90%)
CMYK
cmyk(0%, 1%, 18%, 10%)
Oklch
oklch(90.5% 0.051 103.7)

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

#D68651

Tangerine · Coral · Warm Sun

HEX
#D68651
RGB
rgb(214, 134, 81)
HSL
hsl(24, 62%, 58%)
HSB
hsb(24, 62%, 84%)
CMYK
cmyk(0%, 37%, 62%, 16%)
Oklch
oklch(69.3% 0.120 53.0)

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

#58544A

Ochre · DarkOliveGreen · Charcoal

HEX
#58544A
RGB
rgb(88, 84, 74)
HSL
hsl(43, 9%, 32%)
HSB
hsb(43, 16%, 35%)
CMYK
cmyk(0%, 5%, 16%, 65%)
Oklch
oklch(44.7% 0.017 88.8)

Traditional「Ochre」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

809AA4
A4897F

Analogous

7FA49C
809AA4
7F87A4

Triadic

809AA4
A47F99
99A47F

Split-Comp.

809AA4
A47F87
A49C7F

Tetradic

809AA4
9C7FA4
A4897F
87A47F

Contrast Matrix WCAG 2.1 Contrast

809AA4
D7C87A
E5E2BB
D68651
58544A
—
1.8
Fail
2.3
Fail
1.0
Fail
2.5
Fail
1.8
Fail
—
1.3
Fail
1.7
Fail
4.5
AA Large
2.3
Fail
1.3
Fail
—
2.2
Fail
5.7
AA
1.0
Fail
1.7
Fail
2.2
Fail
—
2.7
Fail
2.5
Fail
4.5
AA Large
5.7
AA
2.7
Fail
—
White BG
3.0Fail
1.7Fail
1.3Fail
2.8Fail
7.5AAA
Black BG
7.1AAA
12.4AAA
15.9AAA
7.4AAA
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8BA2
D1D08D
E4E4C4
B3B35E
56564C

Deuteranopia

8A88A1
D1D391
E4E4C7
B8BE61
57574D

Tritanopia

81A09F
D69C9F
E5CCCE
D2686A
584E4F

Achromatopsia

939393
C4C4C4
DEDEDE
989898
545454

Shades & Tints Shades & Tints

#809AA4

Dark
Light

#D7C87A

Dark
Light

#E5E2BB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #809aa4;
  --color-2: #d7c87a;
  --color-3: #e5e2bb;
  --color-4: #d68651;
  --color-5: #58544a;
}

SCSS

$color-1: #809aa4;
$color-2: #d7c87a;
$color-3: #e5e2bb;
$color-4: #d68651;
$color-5: #58544a;

TAILWIND

colors: {
  'brand-1': '#809aa4',
  'brand-2': '#d7c87a',
  'brand-3': '#e5e2bb',
  'brand-4': '#d68651',
  'brand-5': '#58544a',
}

RGB Array

[128, 154, 164], [215, 200, 122], [229, 226, 187], [214, 134, 81], [88, 84, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #809AA4, #D7C87A, #E5E2BB, #D68651, #58544A is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #809aa4; --color-2: #d7c87a; --color-3: #e5e2bb; --color-4: #d68651; --color-5: #58544a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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