← Back to Editor

#332C40 · #E4DE91 · #987E6F · #9C94A2 · #ABB2B7

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

#332C40

Deep Indigo · DarkSlateGray · Eggplant

HEX
#332C40
RGB
rgb(51, 44, 64)
HSL
hsl(261, 19%, 21%)
HSB
hsb(261, 31%, 25%)
CMYK
cmyk(20%, 31%, 0%, 75%)
Oklch
oklch(30.9% 0.036 300.3)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#E4DE91

Fresh Green · Khaki · Sunflower

HEX
#E4DE91
RGB
rgb(228, 222, 145)
HSL
hsl(56, 61%, 73%)
HSB
hsb(56, 36%, 89%)
CMYK
cmyk(0%, 3%, 36%, 11%)
Oklch
oklch(88.8% 0.098 104.4)

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

#987E6F

Tangerine · Gray · Warm Sun

HEX
#987E6F
RGB
rgb(152, 126, 111)
HSL
hsl(22, 17%, 52%)
HSB
hsb(22, 27%, 60%)
CMYK
cmyk(0%, 17%, 27%, 40%)
Oklch
oklch(61.3% 0.039 51.7)

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

#9C94A2

Ash · DarkGray · Silver Sand

HEX
#9C94A2
RGB
rgb(156, 148, 162)
HSL
hsl(274, 7%, 61%)
HSB
hsb(274, 9%, 64%)
CMYK
cmyk(4%, 9%, 0%, 36%)
Oklch
oklch(67.8% 0.022 311.0)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#ABB2B7

Sky Blue · DarkGray · Silver Sand

HEX
#ABB2B7
RGB
rgb(171, 178, 183)
HSL
hsl(205, 8%, 69%)
HSB
hsb(205, 7%, 72%)
CMYK
cmyk(7%, 3%, 0%, 28%)
Oklch
oklch(76.0% 0.011 238.6)

Traditional「Sky Blue」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

332C40
39402B

Analogous

2B2E40
332C40
3D2B40

Triadic

332C40
40322B
2B4032

Split-Comp.

332C40
403D2B
2E402B

Tetradic

332C40
402B2E
39402B
2B403D

Contrast Matrix WCAG 2.1 Contrast

332C40
E4DE91
987E6F
9C94A2
ABB2B7
—
9.6
AAA
3.5
AA Large
4.6
AA
6.2
AA
9.6
AAA
—
2.7
Fail
2.1
Fail
1.5
Fail
3.5
AA Large
2.7
Fail
—
1.3
Fail
1.8
Fail
4.6
AA
2.1
Fail
1.3
Fail
—
1.4
Fail
6.2
AA
1.5
Fail
1.8
Fail
1.4
Fail
—
White BG
13.3AAA
1.4Fail
3.8AA Large
2.9Fail
2.1Fail
Black BG
1.6Fail
15.2AAA
5.5AA
7.2AAA
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

30303B
E1E1A4
8D8D73
99989F
AEAEB6

Deuteranopia

30313A
E2E2A8
8E9073
999A9E
AEADB6

Tritanopia

333737
E4B2B6
977576
9C9C9B
ABB5B5

Achromatopsia

303030
D7D7D7
848484
989898
B0B0B0

Shades & Tints Shades & Tints

#332C40

Dark
Light

#E4DE91

Dark
Light

#987E6F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #332c40;
  --color-2: #e4de91;
  --color-3: #987e6f;
  --color-4: #9c94a2;
  --color-5: #abb2b7;
}

SCSS

$color-1: #332c40;
$color-2: #e4de91;
$color-3: #987e6f;
$color-4: #9c94a2;
$color-5: #abb2b7;

TAILWIND

colors: {
  'brand-1': '#332c40',
  'brand-2': '#e4de91',
  'brand-3': '#987e6f',
  'brand-4': '#9c94a2',
  'brand-5': '#abb2b7',
}

RGB Array

[51, 44, 64], [228, 222, 145], [152, 126, 111], [156, 148, 162], [171, 178, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #332C40, #E4DE91, #987E6F, #9C94A2, #ABB2B7 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: #332c40; --color-2: #e4de91; --color-3: #987e6f; --color-4: #9c94a2; --color-5: #abb2b7. 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