← Back to Editor

#E5ECF2 · #7E93B2 · #3D2E1B · #816852 · #3D3532

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

#E5ECF2

Sky Blue · Lavender · Sky Blue

HEX
#E5ECF2
RGB
rgb(229, 236, 242)
HSL
hsl(208, 33%, 92%)
HSB
hsb(208, 5%, 95%)
CMYK
cmyk(5%, 2%, 0%, 5%)
Oklch
oklch(94.0% 0.011 243.7)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#7E93B2

Azure · LightSlateGray · Navy Blue

HEX
#7E93B2
RGB
rgb(126, 147, 178)
HSL
hsl(216, 25%, 60%)
HSB
hsb(216, 29%, 70%)
CMYK
cmyk(29%, 17%, 0%, 30%)
Oklch
oklch(65.8% 0.052 258.0)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#3D2E1B

Ochre · DarkSlateGray · Cinnamon

HEX
#3D2E1B
RGB
rgb(61, 46, 27)
HSL
hsl(34, 39%, 17%)
HSB
hsb(34, 56%, 24%)
CMYK
cmyk(0%, 25%, 56%, 76%)
Oklch
oklch(31.3% 0.038 72.3)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#816852

Tangerine · DimGray · Amber Brown

HEX
#816852
RGB
rgb(129, 104, 82)
HSL
hsl(28, 22%, 41%)
HSB
hsb(28, 36%, 51%)
CMYK
cmyk(0%, 19%, 36%, 49%)
Oklch
oklch(53.6% 0.046 63.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#3D3532

Tangerine · DarkSlateGray · Cinnamon

HEX
#3D3532
RGB
rgb(61, 53, 50)
HSL
hsl(16, 10%, 22%)
HSB
hsb(16, 18%, 24%)
CMYK
cmyk(0%, 13%, 18%, 76%)
Oklch
oklch(33.6% 0.013 41.7)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E5ECF2
F1EAE4

Analogous

E4F1F1
E5ECF2
E4E4F1

Triadic

E5ECF2
F1E4EB
EBF1E4

Split-Comp.

E5ECF2
F1E4E4
F1F1E4

Tetradic

E5ECF2
F1E4F1
F1EAE4
E4F1E4

Contrast Matrix WCAG 2.1 Contrast

E5ECF2
7E93B2
3D2E1B
816852
3D3532
—
2.6
Fail
11.0
AAA
4.4
AA Large
10.0
AAA
2.6
Fail
—
4.2
AA Large
1.7
Fail
3.8
AA Large
11.0
AAA
4.2
AA Large
—
2.5
Fail
1.1
Fail
4.4
AA Large
1.7
Fail
2.5
Fail
—
2.3
Fail
10.0
AAA
3.8
AA Large
1.1
Fail
2.3
Fail
—
White BG
1.2Fail
3.1AA Large
13.1AAA
5.2AA
12.0AAA
Black BG
17.6AAA
6.7AA
1.6Fail
4.0AA Large
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8F1
8787AA
373620
767657
3A3933

Deuteranopia

E8E7F0
8684A9
373821
787A59
3A3B33

Tritanopia

E5EFEF
7FA5A3
3C2324
805C5C
3D3333

Achromatopsia

EBEBEB
909090
303030
6D6D6D
373737

Shades & Tints Shades & Tints

#E5ECF2

Dark
Light

#7E93B2

Dark
Light

#3D2E1B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e5ecf2;
  --color-2: #7e93b2;
  --color-3: #3d2e1b;
  --color-4: #816852;
  --color-5: #3d3532;
}

SCSS

$color-1: #e5ecf2;
$color-2: #7e93b2;
$color-3: #3d2e1b;
$color-4: #816852;
$color-5: #3d3532;

TAILWIND

colors: {
  'brand-1': '#e5ecf2',
  'brand-2': '#7e93b2',
  'brand-3': '#3d2e1b',
  'brand-4': '#816852',
  'brand-5': '#3d3532',
}

RGB Array

[229, 236, 242], [126, 147, 178], [61, 46, 27], [129, 104, 82], [61, 53, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #E5ECF2, #7E93B2, #3D2E1B, #816852, #3D3532 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: #e5ecf2; --color-2: #7e93b2; --color-3: #3d2e1b; --color-4: #816852; --color-5: #3d3532. 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