← Back to Editor

#9E8955 · #423F8F · #E0B76F · #8382B6 · #ECE3A9

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 WebsiteBlog

Color Details Color Details

#9E8955

Ochre · Gray · Honey Gold

HEX
#9E8955
RGB
rgb(158, 137, 85)
HSL
hsl(43, 30%, 48%)
HSB
hsb(43, 46%, 62%)
CMYK
cmyk(0%, 13%, 46%, 38%)
Oklch
oklch(63.7% 0.075 88.3)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#423F8F

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#423F8F
RGB
rgb(66, 63, 143)
HSL
hsl(242, 39%, 40%)
HSB
hsb(242, 56%, 56%)
CMYK
cmyk(54%, 56%, 0%, 44%)
Oklch
oklch(41.6% 0.128 280.9)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#E0B76F

Ginger · BurlyWood · Warm Sun

HEX
#E0B76F
RGB
rgb(224, 183, 111)
HSL
hsl(38, 65%, 66%)
HSB
hsb(38, 50%, 88%)
CMYK
cmyk(0%, 18%, 50%, 12%)
Oklch
oklch(80.0% 0.102 80.6)

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

#8382B6

Wisteria · LightSlateGray · Cobalt Blue

HEX
#8382B6
RGB
rgb(131, 130, 182)
HSL
hsl(241, 26%, 61%)
HSB
hsb(241, 29%, 71%)
CMYK
cmyk(28%, 29%, 0%, 29%)
Oklch
oklch(62.7% 0.078 284.8)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#ECE3A9

Fresh Green · Wheat · Lemon Cream

HEX
#ECE3A9
RGB
rgb(236, 227, 169)
HSL
hsl(52, 64%, 79%)
HSB
hsb(52, 28%, 93%)
CMYK
cmyk(0%, 4%, 28%, 7%)
Oklch
oklch(90.9% 0.075 100.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9E8955
566A9F

Analogous

9F6656
9E8955
8F9F56

Triadic

9E8955
569F8A
8A569F

Split-Comp.

9E8955
568F9F
66569F

Tetradic

9E8955
569F66
566A9F
9F568F

Contrast Matrix WCAG 2.1 Contrast

9E8955
423F8F
E0B76F
8382B6
ECE3A9
—
2.6
Fail
1.8
Fail
1.1
Fail
2.6
Fail
2.6
Fail
—
4.8
AA
2.5
Fail
6.9
AA
1.8
Fail
4.8
AA
—
1.9
Fail
1.4
Fail
1.1
Fail
2.5
Fail
1.9
Fail
—
2.8
Fail
2.6
Fail
6.9
AA
1.4
Fail
2.8
Fail
—
White BG
3.4AA Large
9.0AAA
1.9Fail
3.6AA Large
1.3Fail
Black BG
6.2AA
2.3Fail
11.2AAA
5.8AA
16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

959562
41417C
CECE80
8383A9
E8E8B7

Deuteranopia

969865
414177
D1D485
8383A6
E9E9BA

Tritanopia

9D6C6E
426C69
DE8E91
839F9D
ECC2C5

Achromatopsia

898989
494949
BBBBBB
888888
DFDFDF

Shades & Tints Shades & Tints

#9E8955

Dark
Light

#423F8F

Dark
Light

#E0B76F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9e8955;
  --color-2: #423f8f;
  --color-3: #e0b76f;
  --color-4: #8382b6;
  --color-5: #ece3a9;
}

SCSS

$color-1: #9e8955;
$color-2: #423f8f;
$color-3: #e0b76f;
$color-4: #8382b6;
$color-5: #ece3a9;

TAILWIND

colors: {
  'brand-1': '#9e8955',
  'brand-2': '#423f8f',
  'brand-3': '#e0b76f',
  'brand-4': '#8382b6',
  'brand-5': '#ece3a9',
}

RGB Array

[158, 137, 85], [66, 63, 143], [224, 183, 111], [131, 130, 182], [236, 227, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #9E8955, #423F8F, #E0B76F, #8382B6, #ECE3A9 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: #9e8955; --color-2: #423f8f; --color-3: #e0b76f; --color-4: #8382b6; --color-5: #ece3a9. 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