← Back to Editor

#F9F8E4 · #E8EADD · #D3D6B2 · #B8C172 · #3C323A

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

#F9F8E4

Fresh Green · Linen · Lemon Cream

HEX
#F9F8E4
RGB
rgb(249, 248, 228)
HSL
hsl(57, 64%, 94%)
HSB
hsb(57, 8%, 98%)
CMYK
cmyk(0%, 0%, 8%, 2%)
Oklch
oklch(97.5% 0.026 104.5)

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

#E8EADD

Fresh Green · Beige · Lemon Cream

HEX
#E8EADD
RGB
rgb(232, 234, 221)
HSL
hsl(69, 24%, 89%)
HSB
hsb(69, 6%, 92%)
CMYK
cmyk(1%, 0%, 6%, 8%)
Oklch
oklch(93.2% 0.017 113.8)

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

#D3D6B2

Fresh Green · Silver · Lemon Cream

HEX
#D3D6B2
RGB
rgb(211, 214, 178)
HSL
hsl(65, 31%, 77%)
HSB
hsb(65, 17%, 84%)
CMYK
cmyk(1%, 0%, 17%, 16%)
Oklch
oklch(86.4% 0.048 111.3)

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

#B8C172

Autumn Sage · Tan · Sunflower

HEX
#B8C172
RGB
rgb(184, 193, 114)
HSL
hsl(67, 39%, 60%)
HSB
hsb(67, 41%, 76%)
CMYK
cmyk(5%, 0%, 41%, 24%)
Oklch
oklch(78.6% 0.103 114.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#3C323A

Rose Purple · DarkSlateGray · Dark Stone

HEX
#3C323A
RGB
rgb(60, 50, 58)
HSL
hsl(312, 9%, 22%)
HSB
hsb(312, 17%, 24%)
CMYK
cmyk(0%, 17%, 3%, 76%)
Oklch
oklch(33.1% 0.020 332.9)

Traditional「Rose Purple」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9F8E4
E6E7F9

Analogous

F9EFE6
F9F8E4
F1F9E6

Triadic

F9F8E4
E6F9F9
F9E6F9

Split-Comp.

F9F8E4
E6F1F9
EFE6F9

Tetradic

F9F8E4
E6F9EF
E6E7F9
F9E6F1

Contrast Matrix WCAG 2.1 Contrast

F9F8E4
E8EADD
D3D6B2
B8C172
3C323A
—
1.1
Fail
1.4
Fail
1.8
Fail
11.5
AAA
1.1
Fail
—
1.2
Fail
1.6
Fail
10.1
AAA
1.4
Fail
1.2
Fail
—
1.3
Fail
8.2
AAA
1.8
Fail
1.6
Fail
1.3
Fail
—
6.4
AA
11.5
AAA
10.1
AAA
8.2
AAA
6.4
AA
—
White BG
1.1Fail
1.2Fail
1.5Fail
1.9Fail
12.3AAA
Black BG
19.6AAA
17.2AAA
14.0AAA
10.9AAA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9E9
E9E9E0
D4D4BB
BCBC85
383838

Deuteranopia

F9F9EA
E9E9E1
D4D4BD
BBBB8A
383938

Tritanopia

F9EDEE
E8E3E3
D3C2C3
B89498
3C3736

Achromatopsia

F6F6F6
E8E8E8
D1D1D1
B5B5B5
363636

Shades & Tints Shades & Tints

#F9F8E4

Dark
Light

#E8EADD

Dark
Light

#D3D6B2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9f8e4;
  --color-2: #e8eadd;
  --color-3: #d3d6b2;
  --color-4: #b8c172;
  --color-5: #3c323a;
}

SCSS

$color-1: #f9f8e4;
$color-2: #e8eadd;
$color-3: #d3d6b2;
$color-4: #b8c172;
$color-5: #3c323a;

TAILWIND

colors: {
  'brand-1': '#f9f8e4',
  'brand-2': '#e8eadd',
  'brand-3': '#d3d6b2',
  'brand-4': '#b8c172',
  'brand-5': '#3c323a',
}

RGB Array

[249, 248, 228], [232, 234, 221], [211, 214, 178], [184, 193, 114], [60, 50, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F9F8E4, #E8EADD, #D3D6B2, #B8C172, #3C323A is ideal for: health products, baby brands, fresh-style blogs, 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: #f9f8e4; --color-2: #e8eadd; --color-3: #d3d6b2; --color-4: #b8c172; --color-5: #3c323a. 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. 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