← Back to Editor

#8CB5AE · #9DA183 · #EF7656 · #4B5044 · #5D8A85

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

#8CB5AE

Jade · DarkGray · Lake Green

HEX
#8CB5AE
RGB
rgb(140, 181, 174)
HSL
hsl(170, 22%, 63%)
HSB
hsb(170, 23%, 71%)
CMYK
cmyk(23%, 0%, 4%, 29%)
Oklch
oklch(74.1% 0.045 183.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#9DA183

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#9DA183
RGB
rgb(157, 161, 131)
HSL
hsl(68, 14%, 57%)
HSB
hsb(68, 19%, 63%)
CMYK
cmyk(2%, 0%, 19%, 37%)
Oklch
oklch(69.8% 0.042 113.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#EF7656

Peach Pink · Coral · Coral Red

HEX
#EF7656
RGB
rgb(239, 118, 86)
HSL
hsl(13, 83%, 64%)
HSB
hsb(13, 64%, 94%)
CMYK
cmyk(0%, 51%, 64%, 6%)
Oklch
oklch(70.1% 0.157 35.8)

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

#4B5044

Grass Green · DarkSlateGray · Charcoal

HEX
#4B5044
RGB
rgb(75, 80, 68)
HSL
hsl(85, 8%, 29%)
HSB
hsb(85, 15%, 31%)
CMYK
cmyk(6%, 0%, 15%, 69%)
Oklch
oklch(42.3% 0.020 125.7)

Traditional「Grass Green」· Paint「Charcoal」· Creative Midnight Shadow

#5D8A85

Mineral Blue · SlateGray · Mint Ice

HEX
#5D8A85
RGB
rgb(93, 138, 133)
HSL
hsl(173, 19%, 45%)
HSB
hsb(173, 33%, 54%)
CMYK
cmyk(33%, 0%, 4%, 46%)
Oklch
oklch(59.9% 0.050 187.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8CB5AE
B58C93

Analogous

8CB59A
8CB5AE
8CA8B5

Triadic

8CB5AE
AE8CB5
B5AE8C

Split-Comp.

8CB5AE
B58CA8
B59A8C

Tetradic

8CB5AE
9A8CB5
B58C93
A8B58C

Contrast Matrix WCAG 2.1 Contrast

8CB5AE
9DA183
EF7656
4B5044
5D8A85
—
1.2
Fail
1.3
Fail
3.7
AA Large
1.7
Fail
1.2
Fail
—
1.1
Fail
3.1
AA Large
1.4
Fail
1.3
Fail
1.1
Fail
—
2.9
Fail
1.4
Fail
3.7
AA Large
3.1
AA Large
2.9
Fail
—
2.1
Fail
1.7
Fail
1.4
Fail
1.4
Fail
2.1
Fail
—
White BG
2.2Fail
2.7Fail
2.8Fail
8.3AAA
3.9AA Large
Black BG
9.3AAA
7.9AAA
7.4AAA
2.5Fail
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9EB0
9F9F8A
BBBA5E
4D4D47
707186

Deuteranopia

9B98B0
9F9E8C
C2CB60
4D4D48
6E6B87

Tritanopia

8EB1B1
9D9091
E96465
4B494A
5F8787

Achromatopsia

A8A8A8
9C9C9C
979797
4D4D4D
7C7C7C

Shades & Tints Shades & Tints

#8CB5AE

Dark
Light

#9DA183

Dark
Light

#EF7656

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8cb5ae;
  --color-2: #9da183;
  --color-3: #ef7656;
  --color-4: #4b5044;
  --color-5: #5d8a85;
}

SCSS

$color-1: #8cb5ae;
$color-2: #9da183;
$color-3: #ef7656;
$color-4: #4b5044;
$color-5: #5d8a85;

TAILWIND

colors: {
  'brand-1': '#8cb5ae',
  'brand-2': '#9da183',
  'brand-3': '#ef7656',
  'brand-4': '#4b5044',
  'brand-5': '#5d8a85',
}

RGB Array

[140, 181, 174], [157, 161, 131], [239, 118, 86], [75, 80, 68], [93, 138, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #8CB5AE, #9DA183, #EF7656, #4B5044, #5D8A85 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #8cb5ae; --color-2: #9da183; --color-3: #ef7656; --color-4: #4b5044; --color-5: #5d8a85. 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. 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