← Back to Editor

#E9E3F1 · #BDBFD8 · #8D97B2 · #455971 · #D46791

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

#E9E3F1

Wisteria · Lavender · Lavender

HEX
#E9E3F1
RGB
rgb(233, 227, 241)
HSL
hsl(266, 33%, 92%)
HSB
hsb(266, 6%, 95%)
CMYK
cmyk(3%, 6%, 0%, 5%)
Oklch
oklch(92.5% 0.020 305.3)

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

#BDBFD8

Azure · LightSteelBlue · Cobalt Blue

HEX
#BDBFD8
RGB
rgb(189, 191, 216)
HSL
hsl(236, 26%, 79%)
HSB
hsb(236, 12%, 85%)
CMYK
cmyk(12%, 12%, 0%, 15%)
Oklch
oklch(81.1% 0.035 282.0)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#8D97B2

Azure · DarkGray · Cobalt Blue

HEX
#8D97B2
RGB
rgb(141, 151, 178)
HSL
hsl(224, 19%, 63%)
HSB
hsb(224, 21%, 70%)
CMYK
cmyk(21%, 15%, 0%, 30%)
Oklch
oklch(67.8% 0.042 269.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#455971

Indigo · DarkSlateBlue · Prussian Blue

HEX
#455971
RGB
rgb(69, 89, 113)
HSL
hsl(213, 24%, 36%)
HSB
hsb(213, 39%, 44%)
CMYK
cmyk(39%, 21%, 0%, 56%)
Oklch
oklch(45.7% 0.046 253.3)

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

#D46791

Rouge · LightCoral · Rose Pink

HEX
#D46791
RGB
rgb(212, 103, 145)
HSL
hsl(337, 56%, 62%)
HSB
hsb(337, 51%, 83%)
CMYK
cmyk(0%, 51%, 32%, 17%)
Oklch
oklch(65.5% 0.144 357.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E9E3F1
EBF1E4

Analogous

E4E5F1
E9E3F1
F0E4F1

Triadic

E9E3F1
F1EAE4
E4F1EA

Split-Comp.

E9E3F1
F1F0E4
E5F1E4

Tetradic

E9E3F1
F1E4E5
EBF1E4
E4F1F0

Contrast Matrix WCAG 2.1 Contrast

E9E3F1
BDBFD8
8D97B2
455971
D46791
—
1.4
Fail
2.3
Fail
5.7
AA
2.7
Fail
1.4
Fail
—
1.6
Fail
4.0
AA Large
1.9
Fail
2.3
Fail
1.6
Fail
—
2.5
Fail
1.2
Fail
5.7
AA
4.0
AA Large
2.5
Fail
—
2.1
Fail
2.7
Fail
1.9
Fail
1.2
Fail
2.1
Fail
—
White BG
1.3Fail
1.8Fail
2.9Fail
7.2AAA
3.4AA Large
Black BG
16.7AAA
11.6AAA
7.2AAA
2.9Fail
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6EE
BEBED2
9191AB
4E4E6B
A5A487

Deuteranopia

E7E7ED
BEBED1
9190AA
4D4B6A
ABB384

Tritanopia

E9EBEA
BDCDCC
8EA6A5
466766
CF7F7D

Achromatopsia

E6E6E6
C1C1C1
979797
565656
8C8C8C

Shades & Tints Shades & Tints

#E9E3F1

Dark
Light

#BDBFD8

Dark
Light

#8D97B2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e9e3f1;
  --color-2: #bdbfd8;
  --color-3: #8d97b2;
  --color-4: #455971;
  --color-5: #d46791;
}

SCSS

$color-1: #e9e3f1;
$color-2: #bdbfd8;
$color-3: #8d97b2;
$color-4: #455971;
$color-5: #d46791;

TAILWIND

colors: {
  'brand-1': '#e9e3f1',
  'brand-2': '#bdbfd8',
  'brand-3': '#8d97b2',
  'brand-4': '#455971',
  'brand-5': '#d46791',
}

RGB Array

[233, 227, 241], [189, 191, 216], [141, 151, 178], [69, 89, 113], [212, 103, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #E9E3F1, #BDBFD8, #8D97B2, #455971, #D46791 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: #e9e3f1; --color-2: #bdbfd8; --color-3: #8d97b2; --color-4: #455971; --color-5: #d46791. 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