← Back to Editor

#F0E7D8 · #C9C0AB · #8F918A · #4A4549 · #806F7E

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 WebsiteBlogData Visualization

Color Details Color Details

#F0E7D8

Goose Yellow · Beige · Peach Orange

HEX
#F0E7D8
RGB
rgb(240, 231, 216)
HSL
hsl(38, 44%, 89%)
HSB
hsb(38, 10%, 94%)
CMYK
cmyk(0%, 4%, 10%, 6%)
Oklch
oklch(93.1% 0.022 80.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#C9C0AB

Goose Yellow · Silver · Sunflower

HEX
#C9C0AB
RGB
rgb(201, 192, 171)
HSL
hsl(42, 22%, 73%)
HSB
hsb(42, 15%, 79%)
CMYK
cmyk(0%, 4%, 15%, 21%)
Oklch
oklch(80.9% 0.030 87.6)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#8F918A

Ash · Gray · Warm Gray

HEX
#8F918A
RGB
rgb(143, 145, 138)
HSL
hsl(77, 3%, 55%)
HSB
hsb(77, 5%, 57%)
CMYK
cmyk(1%, 0%, 5%, 43%)
Oklch
oklch(65.3% 0.010 119.7)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#4A4549

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4A4549
RGB
rgb(74, 69, 73)
HSL
hsl(312, 3%, 28%)
HSB
hsb(312, 7%, 29%)
CMYK
cmyk(0%, 7%, 1%, 71%)
Oklch
oklch(39.7% 0.009 332.4)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#806F7E

Ink Gray · Gray · Warm Gray

HEX
#806F7E
RGB
rgb(128, 111, 126)
HSL
hsl(307, 7%, 47%)
HSB
hsb(307, 13%, 50%)
CMYK
cmyk(0%, 13%, 2%, 50%)
Oklch
oklch(56.3% 0.031 329.8)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E7D8
D7E0EF

Analogous

EFDAD7
F0E7D8
ECEFD7

Triadic

F0E7D8
D7EFE6
E6D7EF

Split-Comp.

F0E7D8
D7ECEF
DAD7EF

Tetradic

F0E7D8
D7EFDA
D7E0EF
EFD7EC

Contrast Matrix WCAG 2.1 Contrast

F0E7D8
C9C0AB
8F918A
4A4549
806F7E
—
1.5
Fail
2.6
Fail
7.7
AAA
3.8
AA Large
1.5
Fail
—
1.8
Fail
5.2
AA
2.6
Fail
2.6
Fail
1.8
Fail
—
2.9
Fail
1.5
Fail
7.7
AAA
5.2
AA
2.9
Fail
—
2.0
Fail
3.8
AA Large
2.6
Fail
1.5
Fail
2.0
Fail
—
White BG
1.2Fail
1.8Fail
3.2AA Large
9.4AAA
4.7AA
Black BG
17.1AAA
11.6AAA
6.6AA
2.2Fail
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECDC
C5C5B0
90908C
484848
79787A

Deuteranopia

EDEDDD
C6C6B1
90908C
484948
7A7B79

Tritanopia

F0DEDF
C9B4B5
8F8D8D
4A4747
7F7877

Achromatopsia

E8E8E8
C0C0C0
909090
474747
767676

Shades & Tints Shades & Tints

#F0E7D8

Dark
Light

#C9C0AB

Dark
Light

#8F918A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e7d8;
  --color-2: #c9c0ab;
  --color-3: #8f918a;
  --color-4: #4a4549;
  --color-5: #806f7e;
}

SCSS

$color-1: #f0e7d8;
$color-2: #c9c0ab;
$color-3: #8f918a;
$color-4: #4a4549;
$color-5: #806f7e;

TAILWIND

colors: {
  'brand-1': '#f0e7d8',
  'brand-2': '#c9c0ab',
  'brand-3': '#8f918a',
  'brand-4': '#4a4549',
  'brand-5': '#806f7e',
}

RGB Array

[240, 231, 216], [201, 192, 171], [143, 145, 138], [74, 69, 73], [128, 111, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F0E7D8, #C9C0AB, #8F918A, #4A4549, #806F7E is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f0e7d8; --color-2: #c9c0ab; --color-3: #8f918a; --color-4: #4a4549; --color-5: #806f7e. 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. Restrained colors convey professionalism and trust. 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