← Back to Editor

#589DB0 · #6E6B8F · #D46E9C · #FF816E · #E0B78D

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

#589DB0

Slate Blue · CadetBlue · Lake Green

HEX
#589DB0
RGB
rgb(88, 157, 176)
HSL
hsl(193, 36%, 52%)
HSB
hsb(193, 50%, 69%)
CMYK
cmyk(50%, 11%, 0%, 31%)
Oklch
oklch(65.8% 0.075 217.7)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#6E6B8F

Deep Indigo · SlateGray · Navy Blue

HEX
#6E6B8F
RGB
rgb(110, 107, 143)
HSL
hsl(245, 14%, 49%)
HSB
hsb(245, 25%, 56%)
CMYK
cmyk(23%, 25%, 0%, 44%)
Oklch
oklch(54.4% 0.056 288.2)

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

#D46E9C

Rouge · LightCoral · Rose Pink

HEX
#D46E9C
RGB
rgb(212, 110, 156)
HSL
hsl(333, 54%, 63%)
HSB
hsb(333, 48%, 83%)
CMYK
cmyk(0%, 48%, 26%, 17%)
Oklch
oklch(66.9% 0.138 353.1)

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

#FF816E

Peach Pink · Salmon · Coral Red

HEX
#FF816E
RGB
rgb(255, 129, 110)
HSL
hsl(8, 100%, 72%)
HSB
hsb(8, 57%, 100%)
CMYK
cmyk(0%, 49%, 57%, 0%)
Oklch
oklch(74.2% 0.157 30.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E0B78D

Goose Yellow · BurlyWood · Warm Sun

HEX
#E0B78D
RGB
rgb(224, 183, 141)
HSL
hsl(30, 57%, 72%)
HSB
hsb(30, 37%, 88%)
CMYK
cmyk(0%, 18%, 37%, 12%)
Oklch
oklch(80.6% 0.073 67.2)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

589DB0
B16C59

Analogous

59B198
589DB0
5972B1

Triadic

589DB0
B1599E
9EB159

Split-Comp.

589DB0
B15972
B19859

Tetradic

589DB0
9859B1
B16C59
72B159

Contrast Matrix WCAG 2.1 Contrast

589DB0
6E6B8F
D46E9C
FF816E
E0B78D
—
1.6
Fail
1.1
Fail
1.3
Fail
1.7
Fail
1.6
Fail
—
1.6
Fail
2.1
Fail
2.7
Fail
1.1
Fail
1.6
Fail
—
1.3
Fail
1.7
Fail
1.3
Fail
2.1
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
2.7
Fail
1.7
Fail
1.3
Fail
—
White BG
3.1AA Large
5.0AA
3.2AA Large
2.4Fail
1.9Fail
Black BG
6.9AA
4.2AA Large
6.5AA
8.6AAA
11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7676AB
6D6D86
A8A791
C8C773
CECE97

Deuteranopia

726DAA
6D6D84
AEB58E
D0D974
D1D49A

Tritanopia

5BA8A7
6E7F7E
CF8886
F97677
DE9FA1

Achromatopsia

8B8B8B
707070
929292
A5A5A5
BEBEBE

Shades & Tints Shades & Tints

#589DB0

Dark
Light

#6E6B8F

Dark
Light

#D46E9C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #589db0;
  --color-2: #6e6b8f;
  --color-3: #d46e9c;
  --color-4: #ff816e;
  --color-5: #e0b78d;
}

SCSS

$color-1: #589db0;
$color-2: #6e6b8f;
$color-3: #d46e9c;
$color-4: #ff816e;
$color-5: #e0b78d;

TAILWIND

colors: {
  'brand-1': '#589db0',
  'brand-2': '#6e6b8f',
  'brand-3': '#d46e9c',
  'brand-4': '#ff816e',
  'brand-5': '#e0b78d',
}

RGB Array

[88, 157, 176], [110, 107, 143], [212, 110, 156], [255, 129, 110], [224, 183, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #589DB0, #6E6B8F, #D46E9C, #FF816E, #E0B78D 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: #589db0; --color-2: #6e6b8f; --color-3: #d46e9c; --color-4: #ff816e; --color-5: #e0b78d. 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