← Back to Editor

#B7CBC8 · #EEEEE9 · #D9D5CA · #B0BFBF · #98A3A6

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

#B7CBC8

Jade · Silver · Glacier Blue

HEX
#B7CBC8
RGB
rgb(183, 203, 200)
HSL
hsl(171, 16%, 76%)
HSB
hsb(171, 10%, 80%)
CMYK
cmyk(10%, 0%, 1%, 20%)
Oklch
oklch(82.6% 0.022 185.9)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#EEEEE9

Fresh Green · Linen · Lemon Cream

HEX
#EEEEE9
RGB
rgb(238, 238, 233)
HSL
hsl(60, 13%, 92%)
HSB
hsb(60, 2%, 93%)
CMYK
cmyk(0%, 0%, 2%, 7%)
Oklch
oklch(94.8% 0.007 106.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#D9D5CA

Goose Yellow · LightGray · Lemon Cream

HEX
#D9D5CA
RGB
rgb(217, 213, 202)
HSL
hsl(44, 16%, 82%)
HSB
hsb(44, 7%, 85%)
CMYK
cmyk(0%, 2%, 7%, 15%)
Oklch
oklch(87.3% 0.016 90.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#B0BFBF

Sky Blue · Silver · Lake Green

HEX
#B0BFBF
RGB
rgb(176, 191, 191)
HSL
hsl(180, 10%, 72%)
HSB
hsb(180, 8%, 75%)
CMYK
cmyk(8%, 0%, 0%, 25%)
Oklch
oklch(79.3% 0.017 196.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#98A3A6

Ash · DarkGray · Silver Sand

HEX
#98A3A6
RGB
rgb(152, 163, 166)
HSL
hsl(193, 7%, 62%)
HSB
hsb(193, 8%, 65%)
CMYK
cmyk(8%, 2%, 0%, 35%)
Oklch
oklch(70.8% 0.013 215.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7CBC8
CCB8BB

Analogous

B8CCBF
B7CBC8
B8C5CC

Triadic

B7CBC8
C9B8CC
CCC9B8

Split-Comp.

B7CBC8
CCB8C5
CCBFB8

Tetradic

B7CBC8
BFB8CC
CCB8BB
C5CCB8

Contrast Matrix WCAG 2.1 Contrast

B7CBC8
EEEEE9
D9D5CA
B0BFBF
98A3A6
—
1.5
Fail
1.2
Fail
1.1
Fail
1.5
Fail
1.5
Fail
—
1.3
Fail
1.6
Fail
2.2
Fail
1.2
Fail
1.3
Fail
—
1.3
Fail
1.8
Fail
1.1
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
1.5
Fail
2.2
Fail
1.8
Fail
1.4
Fail
—
White BG
1.7Fail
1.2Fail
1.5Fail
1.9Fail
2.6Fail
Black BG
12.4AAA
18.0AAA
14.3AAA
11.1AAA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C0C9
EEEEEA
D7D7CD
B6B7BF
9D9DA5

Deuteranopia

BFBDC9
EEEEEB
D8D8CD
B6B5BF
9C9BA5

Tritanopia

B8C9C9
EEEBEB
D9CFCF
B1BFBF
99A5A5

Achromatopsia

C5C5C5
EDEDED
D5D5D5
BBBBBB
A0A0A0

Shades & Tints Shades & Tints

#B7CBC8

Dark
Light

#EEEEE9

Dark
Light

#D9D5CA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7cbc8;
  --color-2: #eeeee9;
  --color-3: #d9d5ca;
  --color-4: #b0bfbf;
  --color-5: #98a3a6;
}

SCSS

$color-1: #b7cbc8;
$color-2: #eeeee9;
$color-3: #d9d5ca;
$color-4: #b0bfbf;
$color-5: #98a3a6;

TAILWIND

colors: {
  'brand-1': '#b7cbc8',
  'brand-2': '#eeeee9',
  'brand-3': '#d9d5ca',
  'brand-4': '#b0bfbf',
  'brand-5': '#98a3a6',
}

RGB Array

[183, 203, 200], [238, 238, 233], [217, 213, 202], [176, 191, 191], [152, 163, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #B7CBC8, #EEEEE9, #D9D5CA, #B0BFBF, #98A3A6 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. 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: #b7cbc8; --color-2: #eeeee9; --color-3: #d9d5ca; --color-4: #b0bfbf; --color-5: #98a3a6. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts 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