← Back to Editor

#403D1E · #9E9C67 · #FFFDCF · #FFAE7F · #E04855

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#403D1E

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#403D1E
RGB
rgb(64, 61, 30)
HSL
hsl(55, 36%, 18%)
HSB
hsb(55, 53%, 25%)
CMYK
cmyk(0%, 5%, 53%, 75%)
Oklch
oklch(35.5% 0.048 103.7)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#9E9C67

Autumn Sage · Gray · Sunflower

HEX
#9E9C67
RGB
rgb(158, 156, 103)
HSL
hsl(58, 22%, 51%)
HSB
hsb(58, 35%, 62%)
CMYK
cmyk(0%, 1%, 35%, 38%)
Oklch
oklch(68.1% 0.072 106.3)

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

#FFFDCF

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFDCF
RGB
rgb(255, 253, 207)
HSL
hsl(58, 100%, 91%)
HSB
hsb(58, 19%, 100%)
CMYK
cmyk(0%, 1%, 19%, 0%)
Oklch
oklch(98.4% 0.059 105.4)

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

#FFAE7F

Apricot · LightSalmon · Warm Sun

HEX
#FFAE7F
RGB
rgb(255, 174, 127)
HSL
hsl(22, 100%, 75%)
HSB
hsb(22, 50%, 100%)
CMYK
cmyk(0%, 32%, 50%, 0%)
Oklch
oklch(81.9% 0.114 50.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#E04855

Vermilion · Tomato · Passion Red

HEX
#E04855
RGB
rgb(224, 72, 85)
HSL
hsl(355, 71%, 58%)
HSB
hsb(355, 68%, 88%)
CMYK
cmyk(0%, 68%, 62%, 12%)
Oklch
oklch(61.9% 0.188 19.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

403D1E
1D203E

Analogous

3E2B1D
403D1E
313E1D

Triadic

403D1E
1D3E3C
3C1D3E

Split-Comp.

403D1E
1D313E
2B1D3E

Tetradic

403D1E
1D3E2B
1D203E
3E1D31

Contrast Matrix WCAG 2.1 Contrast

403D1E
9E9C67
FFFDCF
FFAE7F
E04855
—
3.9
AA Large
10.6
AAA
6.1
AA
2.7
Fail
3.9
AA Large
—
2.7
Fail
1.6
Fail
1.4
Fail
10.6
AAA
2.7
Fail
—
1.7
Fail
3.9
AA Large
6.1
AA
1.6
Fail
1.7
Fail
—
2.2
Fail
2.7
Fail
1.4
Fail
3.9
AA Large
2.2
Fail
—
White BG
11.0AAA
2.8Fail
1.0Fail
1.8Fail
4.0AA Large
Black BG
1.9Fail
7.4AAA
20.2AAA
11.6AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F26
9D9D74
FEFEDA
DCDB8A
9E9D52

Deuteranopia

3F3F27
9D9D77
FEFEDD
E1E78D
A7B251

Tritanopia

402B2D
9E7E80
FFE3E5
FB9395
D84F4F

Achromatopsia

3A3A3A
979797
F8F8F8
C1C1C1
777777

Shades & Tints Shades & Tints

#403D1E

Dark
Light

#9E9C67

Dark
Light

#FFFDCF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #403d1e;
  --color-2: #9e9c67;
  --color-3: #fffdcf;
  --color-4: #ffae7f;
  --color-5: #e04855;
}

SCSS

$color-1: #403d1e;
$color-2: #9e9c67;
$color-3: #fffdcf;
$color-4: #ffae7f;
$color-5: #e04855;

TAILWIND

colors: {
  'brand-1': '#403d1e',
  'brand-2': '#9e9c67',
  'brand-3': '#fffdcf',
  'brand-4': '#ffae7f',
  'brand-5': '#e04855',
}

RGB Array

[64, 61, 30], [158, 156, 103], [255, 253, 207], [255, 174, 127], [224, 72, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #403D1E, #9E9C67, #FFFDCF, #FFAE7F, #E04855 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #403d1e; --color-2: #9e9c67; --color-3: #fffdcf; --color-4: #ffae7f; --color-5: #e04855. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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