← Back to Editor

#549C86 · #6BA87E · #B6A773 · #E2CD7A · #D8DAD6

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

#549C86

Mineral Blue · CadetBlue · Mint Ice

HEX
#549C86
RGB
rgb(84, 156, 134)
HSL
hsl(162, 30%, 47%)
HSB
hsb(162, 46%, 61%)
CMYK
cmyk(46%, 0%, 14%, 39%)
Oklch
oklch(63.9% 0.081 171.7)

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

#6BA87E

Celadon · CadetBlue · Olive Green

HEX
#6BA87E
RGB
rgb(107, 168, 126)
HSL
hsl(139, 26%, 54%)
HSB
hsb(139, 36%, 66%)
CMYK
cmyk(36%, 0%, 25%, 34%)
Oklch
oklch(67.8% 0.089 153.4)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B6A773

Ginger · Tan · Sunflower

HEX
#B6A773
RGB
rgb(182, 167, 115)
HSL
hsl(47, 31%, 58%)
HSB
hsb(47, 37%, 71%)
CMYK
cmyk(0%, 8%, 37%, 29%)
Oklch
oklch(72.9% 0.072 93.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E2CD7A

Ginger · BurlyWood · Sunflower

HEX
#E2CD7A
RGB
rgb(226, 205, 122)
HSL
hsl(48, 64%, 68%)
HSB
hsb(48, 46%, 89%)
CMYK
cmyk(0%, 9%, 46%, 11%)
Oklch
oklch(84.8% 0.106 95.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D8DAD6

Silver Gray · LightGray · Pearl Gray

HEX
#D8DAD6
RGB
rgb(216, 218, 214)
HSL
hsl(90, 5%, 85%)
HSB
hsb(90, 2%, 85%)
CMYK
cmyk(1%, 0%, 2%, 15%)
Oklch
oklch(88.6% 0.006 128.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

549C86
9C5469

Analogous

549C62
549C86
548D9C

Triadic

549C86
86549C
9C8654

Split-Comp.

549C86
9C548D
9C6254

Tetradic

549C86
62549C
9C5469
8D9C54

Contrast Matrix WCAG 2.1 Contrast

549C86
6BA87E
B6A773
E2CD7A
D8DAD6
—
1.2
Fail
1.4
Fail
2.0
Fail
2.3
Fail
1.2
Fail
—
1.2
Fail
1.8
Fail
2.0
Fail
1.4
Fail
1.2
Fail
—
1.5
Fail
1.7
Fail
2.0
Fail
1.8
Fail
1.5
Fail
—
1.1
Fail
2.3
Fail
2.0
Fail
1.7
Fail
1.1
Fail
—
White BG
3.2AA Large
2.8Fail
2.4Fail
1.6Fail
1.4Fail
Black BG
6.5AA
7.5AAA
8.8AAA
13.2AAA
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

73748B
858688
B0AF80
D9D98E
D9D9D7

Deuteranopia

6F6A8D
827D8B
B0B283
DADC93
D9D9D7

Tritanopia

589090
6E9092
B58A8C
E19EA1
D8D8D8

Achromatopsia

848484
919191
A6A6A6
CACACA
D9D9D9

Shades & Tints Shades & Tints

#549C86

Dark
Light

#6BA87E

Dark
Light

#B6A773

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #549c86;
  --color-2: #6ba87e;
  --color-3: #b6a773;
  --color-4: #e2cd7a;
  --color-5: #d8dad6;
}

SCSS

$color-1: #549c86;
$color-2: #6ba87e;
$color-3: #b6a773;
$color-4: #e2cd7a;
$color-5: #d8dad6;

TAILWIND

colors: {
  'brand-1': '#549c86',
  'brand-2': '#6ba87e',
  'brand-3': '#b6a773',
  'brand-4': '#e2cd7a',
  'brand-5': '#d8dad6',
}

RGB Array

[84, 156, 134], [107, 168, 126], [182, 167, 115], [226, 205, 122], [216, 218, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #549C86, #6BA87E, #B6A773, #E2CD7A, #D8DAD6 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: #549c86; --color-2: #6ba87e; --color-3: #b6a773; --color-4: #e2cd7a; --color-5: #d8dad6. 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