← Back to Editor

#B8C1B0 · #86B39F · #587678 · #2E3641 · #BFA97A

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

#B8C1B0

Celadon · Silver · Apple Green

HEX
#B8C1B0
RGB
rgb(184, 193, 176)
HSL
hsl(92, 12%, 72%)
HSB
hsb(92, 9%, 76%)
CMYK
cmyk(5%, 0%, 9%, 24%)
Oklch
oklch(79.9% 0.025 130.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#86B39F

Jade · DarkSeaGreen · Apple Green

HEX
#86B39F
RGB
rgb(134, 179, 159)
HSL
hsl(153, 23%, 61%)
HSB
hsb(153, 25%, 70%)
CMYK
cmyk(25%, 0%, 11%, 30%)
Oklch
oklch(72.9% 0.056 165.8)

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

#587678

Slate Blue · DimGray · Mint Ice

HEX
#587678
RGB
rgb(88, 118, 120)
HSL
hsl(184, 15%, 41%)
HSB
hsb(184, 27%, 47%)
CMYK
cmyk(27%, 2%, 0%, 53%)
Oklch
oklch(54.3% 0.035 201.3)

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

#2E3641

Indigo · DarkSlateGray · Prussian Blue

HEX
#2E3641
RGB
rgb(46, 54, 65)
HSL
hsl(215, 17%, 22%)
HSB
hsb(215, 29%, 25%)
CMYK
cmyk(29%, 17%, 0%, 75%)
Oklch
oklch(33.0% 0.022 256.4)

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

#BFA97A

Ginger · Tan · Sunflower

HEX
#BFA97A
RGB
rgb(191, 169, 122)
HSL
hsl(41, 35%, 61%)
HSB
hsb(41, 36%, 75%)
CMYK
cmyk(0%, 12%, 36%, 25%)
Oklch
oklch(74.3% 0.068 85.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8C1B0
B8AFC0

Analogous

C0C0AF
B8C1B0
AFC0B0

Triadic

B8C1B0
AFB7C0
C0AFB7

Split-Comp.

B8C1B0
B0AFC0
C0AFC0

Tetradic

B8C1B0
AFC0C0
B8AFC0
C0B0AF

Contrast Matrix WCAG 2.1 Contrast

B8C1B0
86B39F
587678
2E3641
BFA97A
—
1.3
Fail
2.6
Fail
6.6
AA
1.2
Fail
1.3
Fail
—
2.1
Fail
5.2
AA
1.0
Fail
2.6
Fail
2.1
Fail
—
2.5
Fail
2.1
Fail
6.6
AA
5.2
AA
2.5
Fail
—
5.3
AA
1.2
Fail
1.0
Fail
2.1
Fail
5.3
AA
—
White BG
1.9Fail
2.3Fail
4.9AA
12.2AAA
2.3Fail
Black BG
11.3AAA
9.0AAA
4.3AA Large
1.7Fail
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBCB4
999AA4
656578
31323E
B5B585

Deuteranopia

BBBBB5
9794A5
636177
31303E
B7B888

Tritanopia

B8B7B8
88A8A9
5A7777
2E3C3C
BE8E90

Achromatopsia

BCBCBC
A3A3A3
6D6D6D
353535
AAAAAA

Shades & Tints Shades & Tints

#B8C1B0

Dark
Light

#86B39F

Dark
Light

#587678

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8c1b0;
  --color-2: #86b39f;
  --color-3: #587678;
  --color-4: #2e3641;
  --color-5: #bfa97a;
}

SCSS

$color-1: #b8c1b0;
$color-2: #86b39f;
$color-3: #587678;
$color-4: #2e3641;
$color-5: #bfa97a;

TAILWIND

colors: {
  'brand-1': '#b8c1b0',
  'brand-2': '#86b39f',
  'brand-3': '#587678',
  'brand-4': '#2e3641',
  'brand-5': '#bfa97a',
}

RGB Array

[184, 193, 176], [134, 179, 159], [88, 118, 120], [46, 54, 65], [191, 169, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #B8C1B0, #86B39F, #587678, #2E3641, #BFA97A 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: #b8c1b0; --color-2: #86b39f; --color-3: #587678; --color-4: #2e3641; --color-5: #bfa97a. 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