#FBB289 + #DAE5AB + #7DBEB8 + #FDF1CC + #D6D9C4 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#FBB289

Apricot · LightSalmon · Peach Orange

HEX

#FBB289

RGB

rgb(251, 178, 137)

HSL

hsl(22, 93%, 76%)

HSB

hsb(22, 45%, 98%)

CMYK

cmyk(0%, 29%, 45%, 2%)

Oklch

oklch(82.3% 0.102 50.2)

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

#DAE5AB

Willow Green · Wheat · Apple Green

HEX

#DAE5AB

RGB

rgb(218, 229, 171)

HSL

hsl(71, 53%, 78%)

HSB

hsb(71, 25%, 90%)

CMYK

cmyk(5%, 0%, 25%, 10%)

Oklch

oklch(89.9% 0.077 116.7)

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

#7DBEB8

Jade · MediumAquaMarine · Lake Green

HEX

#7DBEB8

RGB

rgb(125, 190, 184)

HSL

hsl(174, 33%, 62%)

HSB

hsb(174, 34%, 75%)

CMYK

cmyk(34%, 0%, 3%, 25%)

Oklch

oklch(75.6% 0.067 188.5)

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

#FDF1CC

Goose Yellow · Bisque · Lemon Cream

HEX

#FDF1CC

RGB

rgb(253, 241, 204)

HSL

hsl(45, 92%, 90%)

HSB

hsb(45, 19%, 99%)

CMYK

cmyk(0%, 5%, 19%, 1%)

Oklch

oklch(95.8% 0.050 92.2)

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

#D6D9C4

Fresh Green · LightGray · Lemon Cream

HEX

#D6D9C4

RGB

rgb(214, 217, 196)

HSL

hsl(69, 22%, 81%)

HSB

hsb(69, 10%, 85%)

CMYK

cmyk(1%, 0%, 10%, 15%)

Oklch

oklch(87.7% 0.028 113.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBB289

89D1FB

Analogous

FB8998

FBB289

FBEC89

Triadic

FBB289

89FBB3

B389FB

Split-Comp.

FBB289

89FBEC

8998FB

Tetradic

FBB289

98FB89

89D1FB

EC89FB

Contrast Matrix WCAG 2.1 Contrast

FBB289	DAE5AB	7DBEB8	FDF1CC	D6D9C4
—	1.3 Fail	1.2 Fail	1.6 Fail	1.2 Fail
1.3 Fail	—	1.6 Fail	1.2 Fail	1.1 Fail
1.2 Fail	1.6 Fail	—	1.9 Fail	1.5 Fail
1.6 Fail	1.2 Fail	1.9 Fail	—	1.3 Fail
1.2 Fail	1.1 Fail	1.5 Fail	1.3 Fail	—

White BG

1.8Fail

1.3Fail

2.1Fail

1.1Fail

1.4Fail

Black BG

11.8AAA

15.8AAA

9.9AAA

18.6AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDB93

DFDFB9

999AB9

F8F8D5

D7D7C9

Deuteranopia

E0E595

DEDDBC

9591BA

F9F9D7

D7D7CA

Tritanopia

F79B9C

DBC4C7

80BBBB

FCDCDE

D6CDCE

Achromatopsia

C3C3C3

DBDBDB

AAAAAA

F0F0F0

D6D6D6

Shades & Tints Shades & Tints

#FBB289

Dark

Light

#DAE5AB

Dark

Light

#7DBEB8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbb289;
  --color-2: #dae5ab;
  --color-3: #7dbeb8;
  --color-4: #fdf1cc;
  --color-5: #d6d9c4;
}

SCSS

$color-1: #fbb289;
$color-2: #dae5ab;
$color-3: #7dbeb8;
$color-4: #fdf1cc;
$color-5: #d6d9c4;

TAILWIND

colors: {
  'brand-1': '#fbb289',
  'brand-2': '#dae5ab',
  'brand-3': '#7dbeb8',
  'brand-4': '#fdf1cc',
  'brand-5': '#d6d9c4',
}

RGB Array

[251, 178, 137], [218, 229, 171], [125, 190, 184], [253, 241, 204], [214, 217, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FBB289, #DAE5AB, #7DBEB8, #FDF1CC, #D6D9C4 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: #fbb289; --color-2: #dae5ab; --color-3: #7dbeb8; --color-4: #fdf1cc; --color-5: #d6d9c4. 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