#B2D1C9 + #877A6F + #D6B89F + #F0C9AA + #F5DEA9 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#B2D1C9

Jade · Silver · Glacier Blue

HEX

#B2D1C9

RGB

rgb(178, 209, 201)

HSL

hsl(165, 25%, 76%)

HSB

hsb(165, 15%, 82%)

CMYK

cmyk(15%, 0%, 4%, 18%)

Oklch

oklch(83.6% 0.035 178.1)

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

#877A6F

Tangerine · Gray · Amber Brown

HEX

#877A6F

RGB

rgb(135, 122, 111)

HSL

hsl(28, 10%, 48%)

HSB

hsb(28, 18%, 53%)

CMYK

cmyk(0%, 10%, 18%, 47%)

Oklch

oklch(58.8% 0.023 62.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#D6B89F

Apricot · Tan · Warm Sun

HEX

#D6B89F

RGB

rgb(214, 184, 159)

HSL

hsl(27, 40%, 73%)

HSB

hsb(27, 26%, 84%)

CMYK

cmyk(0%, 14%, 26%, 16%)

Oklch

oklch(80.2% 0.049 61.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F0C9AA

Apricot · Wheat · Peach Orange

HEX

#F0C9AA

RGB

rgb(240, 201, 170)

HSL

hsl(27, 70%, 80%)

HSB

hsb(27, 29%, 94%)

CMYK

cmyk(0%, 16%, 29%, 6%)

Oklch

oklch(86.2% 0.061 60.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F5DEA9

Goose Yellow · Wheat · Lemon Cream

HEX

#F5DEA9

RGB

rgb(245, 222, 169)

HSL

hsl(42, 79%, 81%)

HSB

hsb(42, 31%, 96%)

CMYK

cmyk(0%, 9%, 31%, 4%)

Oklch

oklch(90.7% 0.073 87.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2D1C9

D1B3BA

Analogous

B3D1BA

B2D1C9

B3C9D1

Triadic

B2D1C9

C9B3D1

D1C9B3

Split-Comp.

B2D1C9

D1B3C9

D1BAB3

Tetradic

B2D1C9

BAB3D1

D1B3BA

C9D1B3

Contrast Matrix WCAG 2.1 Contrast

B2D1C9	877A6F	D6B89F	F0C9AA	F5DEA9
—	2.5 Fail	1.1 Fail	1.1 Fail	1.2 Fail
2.5 Fail	—	2.2 Fail	2.7 Fail	3.2 AA Large
1.1 Fail	2.2 Fail	—	1.2 Fail	1.4 Fail
1.1 Fail	2.7 Fail	1.2 Fail	—	1.2 Fail
1.2 Fail	3.2 AA Large	1.4 Fail	1.2 Fail	—

White BG

1.6Fail

4.2AA Large

1.9Fail

1.5Fail

1.3Fail

Black BG

12.9AAA

5.0AA

11.2AAA

13.6AAA

15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFC0CB

818172

C9C9A5

DFDFB2

EBEBB6

Deuteranopia

BEBBCB

828372

CBCDA7

E1E4B3

ECEEB9

Tritanopia

B4CCCD

867474

D4AAAB

EEB7B9

F4C0C2

Achromatopsia

C7C7C7

7D7D7D

BEBEBE

D1D1D1

DFDFDF

Shades & Tints Shades & Tints

#B2D1C9

Dark

Light

#877A6F

Dark

Light

#D6B89F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2d1c9;
  --color-2: #877a6f;
  --color-3: #d6b89f;
  --color-4: #f0c9aa;
  --color-5: #f5dea9;
}

SCSS

$color-1: #b2d1c9;
$color-2: #877a6f;
$color-3: #d6b89f;
$color-4: #f0c9aa;
$color-5: #f5dea9;

TAILWIND

colors: {
  'brand-1': '#b2d1c9',
  'brand-2': '#877a6f',
  'brand-3': '#d6b89f',
  'brand-4': '#f0c9aa',
  'brand-5': '#f5dea9',
}

RGB Array

[178, 209, 201], [135, 122, 111], [214, 184, 159], [240, 201, 170], [245, 222, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #B2D1C9, #877A6F, #D6B89F, #F0C9AA, #F5DEA9 is ideal for: health products, baby brands, fresh-style blogs. 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: #b2d1c9; --color-2: #877a6f; --color-3: #d6b89f; --color-4: #f0c9aa; --color-5: #f5dea9. 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 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