#BBB89F + #F7F1D9 + #C77171 + #DF9977 + #D3C394 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#BBB89F

Fresh Green · DarkGray · Sunflower

HEX

#BBB89F

RGB

rgb(187, 184, 159)

HSL

hsl(54, 17%, 68%)

HSB

hsb(54, 15%, 73%)

CMYK

cmyk(0%, 2%, 15%, 27%)

Oklch

oklch(77.8% 0.035 101.5)

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

#F7F1D9

Goose Yellow · Beige · Lemon Cream

HEX

#F7F1D9

RGB

rgb(247, 241, 217)

HSL

hsl(48, 65%, 91%)

HSB

hsb(48, 12%, 97%)

CMYK

cmyk(0%, 2%, 12%, 3%)

Oklch

oklch(95.7% 0.032 95.4)

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

#C77171

Peach Pink · LightCoral · Coral Red

HEX

#C77171

RGB

rgb(199, 113, 113)

HSL

hsl(0, 43%, 61%)

HSB

hsb(0, 43%, 78%)

CMYK

cmyk(0%, 43%, 43%, 22%)

Oklch

oklch(64.4% 0.109 20.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DF9977

Apricot · DarkSalmon · Warm Sun

HEX

#DF9977

RGB

rgb(223, 153, 119)

HSL

hsl(20, 62%, 67%)

HSB

hsb(20, 47%, 87%)

CMYK

cmyk(0%, 31%, 47%, 13%)

Oklch

oklch(74.4% 0.097 46.7)

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

#D3C394

Ginger · Tan · Sunflower

HEX

#D3C394

RGB

rgb(211, 195, 148)

HSL

hsl(45, 42%, 70%)

HSB

hsb(45, 30%, 83%)

CMYK

cmyk(0%, 8%, 30%, 17%)

Oklch

oklch(81.9% 0.065 91.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBB89F

A0A2BB

Analogous

BBABA0

BBB89F

B0BBA0

Triadic

BBB89F

A0BBB8

B8A0BB

Split-Comp.

BBB89F

A0B0BB

ABA0BB

Tetradic

BBB89F

A0BBAB

A0A2BB

BBA0B0

Contrast Matrix WCAG 2.1 Contrast

BBB89F	F7F1D9	C77171	DF9977	D3C394
—	1.8 Fail	1.7 Fail	1.2 Fail	1.1 Fail
1.8 Fail	—	3.1 AA Large	2.1 Fail	1.5 Fail
1.7 Fail	3.1 AA Large	—	1.5 Fail	2.0 Fail
1.2 Fail	2.1 Fail	1.5 Fail	—	1.3 Fail
1.1 Fail	1.5 Fail	2.0 Fail	1.3 Fail	—

White BG

2.0Fail

1.1Fail

3.5AA Large

2.3Fail

1.7Fail

Black BG

10.5AAA

18.5AAA

6.0AA

9.0AAA

12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABAA5

F4F4DF

A2A171

C1C07F

CCCC9F

Deuteranopia

BABAA7

F5F5E0

A7AD71

C5CA81

CDCEA2

Tritanopia

BBAAAB

F7E3E4

C37171

DC8687

D2A8AA

Achromatopsia

B6B6B6

F0F0F0

8B8B8B

AAAAAA

C2C2C2

Shades & Tints Shades & Tints

#BBB89F

Dark

Light

#F7F1D9

Dark

Light

#C77171

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbb89f;
  --color-2: #f7f1d9;
  --color-3: #c77171;
  --color-4: #df9977;
  --color-5: #d3c394;
}

SCSS

$color-1: #bbb89f;
$color-2: #f7f1d9;
$color-3: #c77171;
$color-4: #df9977;
$color-5: #d3c394;

TAILWIND

colors: {
  'brand-1': '#bbb89f',
  'brand-2': '#f7f1d9',
  'brand-3': '#c77171',
  'brand-4': '#df9977',
  'brand-5': '#d3c394',
}

RGB Array

[187, 184, 159], [247, 241, 217], [199, 113, 113], [223, 153, 119], [211, 195, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #BBB89F, #F7F1D9, #C77171, #DF9977, #D3C394 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: #bbb89f; --color-2: #f7f1d9; --color-3: #c77171; --color-4: #df9977; --color-5: #d3c394. 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