← Back to Editor

#B2BCA3 · #A7B39D · #9BA793 · #888F88 · #765B7C

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGrounded

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#B2BCA3

Willow Green · DarkGray · Apple Green

HEX
#B2BCA3
RGB
rgb(178, 188, 163)
HSL
hsl(84, 16%, 69%)
HSB
hsb(84, 13%, 74%)
CMYK
cmyk(5%, 0%, 13%, 26%)
Oklch
oklch(78.0% 0.036 125.0)

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

#A7B39D

Celadon · DarkGray · Apple Green

HEX
#A7B39D
RGB
rgb(167, 179, 157)
HSL
hsl(93, 13%, 66%)
HSB
hsb(93, 12%, 70%)
CMYK
cmyk(7%, 0%, 12%, 30%)
Oklch
oklch(75.1% 0.034 130.7)

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

#9BA793

Celadon · DarkSeaGreen · Apple Green

HEX
#9BA793
RGB
rgb(155, 167, 147)
HSL
hsl(96, 10%, 62%)
HSB
hsb(96, 12%, 65%)
CMYK
cmyk(7%, 0%, 12%, 35%)
Oklch
oklch(71.3% 0.031 132.7)

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

#888F88

Ash · Gray · Warm Gray

HEX
#888F88
RGB
rgb(136, 143, 136)
HSL
hsl(120, 3%, 55%)
HSB
hsb(120, 5%, 56%)
CMYK
cmyk(5%, 0%, 5%, 44%)
Oklch
oklch(64.2% 0.013 145.4)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#765B7C

Dark Plum · DimGray · Violet

HEX
#765B7C
RGB
rgb(118, 91, 124)
HSL
hsl(289, 15%, 42%)
HSB
hsb(289, 27%, 49%)
CMYK
cmyk(5%, 27%, 0%, 51%)
Oklch
oklch(51.1% 0.061 320.1)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2BCA3
ADA3BD

Analogous

BDBAA3
B2BCA3
A6BDA3

Triadic

B2BCA3
A3B2BD
BDA3B2

Split-Comp.

B2BCA3
A3A6BD
BAA3BD

Tetradic

B2BCA3
A3BDBA
ADA3BD
BDA3A6

Contrast Matrix WCAG 2.1 Contrast

B2BCA3
A7B39D
9BA793
888F88
765B7C
—
1.1
Fail
1.3
Fail
1.7
Fail
3.0
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
2.7
Fail
1.3
Fail
1.1
Fail
—
1.3
Fail
2.3
Fail
1.7
Fail
1.5
Fail
1.3
Fail
—
1.8
Fail
3.0
Fail
2.7
Fail
2.3
Fail
1.8
Fail
—
White BG
2.0Fail
2.2Fail
2.5Fail
3.3AA Large
5.9AA
Black BG
10.6AAA
9.6AAA
8.3AAA
6.3AA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B6A9
ACACA2
A0A098
8B8B8A
6A6A74

Deuteranopia

B6B5AB
ACABA4
A09F99
8B8A8A
6C6E72

Tritanopia

B3AEAF
A8A7A7
9C9C9D
888B8B
756E6C

Achromatopsia

B6B6B6
ADADAD
A1A1A1
8C8C8C
676767

Shades & Tints Shades & Tints

#B2BCA3

Dark
Light

#A7B39D

Dark
Light

#9BA793

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2bca3;
  --color-2: #a7b39d;
  --color-3: #9ba793;
  --color-4: #888f88;
  --color-5: #765b7c;
}

SCSS

$color-1: #b2bca3;
$color-2: #a7b39d;
$color-3: #9ba793;
$color-4: #888f88;
$color-5: #765b7c;

TAILWIND

colors: {
  'brand-1': '#b2bca3',
  'brand-2': '#a7b39d',
  'brand-3': '#9ba793',
  'brand-4': '#888f88',
  'brand-5': '#765b7c',
}

RGB Array

[178, 188, 163], [167, 179, 157], [155, 167, 147], [136, 143, 136], [118, 91, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #B2BCA3, #A7B39D, #9BA793, #888F88, #765B7C 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: #b2bca3; --color-2: #a7b39d; --color-3: #9ba793; --color-4: #888f88; --color-5: #765b7c. 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