#ECC3BF + #F3EDCD + #D5D188 + #978F8C + #B9C2AF · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#ECC3BF

Peach Pink · Pink · Cherry Blossom

HEX

#ECC3BF

RGB

rgb(236, 195, 191)

HSL

hsl(5, 54%, 84%)

HSB

hsb(5, 19%, 93%)

CMYK

cmyk(0%, 17%, 19%, 7%)

Oklch

oklch(85.2% 0.047 24.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F3EDCD

Fresh Green · Beige · Lemon Cream

HEX

#F3EDCD

RGB

rgb(243, 237, 205)

HSL

hsl(51, 61%, 88%)

HSB

hsb(51, 16%, 95%)

CMYK

cmyk(0%, 2%, 16%, 5%)

Oklch

oklch(94.3% 0.042 98.4)

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

#D5D188

Fresh Green · BurlyWood · Sunflower

HEX

#D5D188

RGB

rgb(213, 209, 136)

HSL

hsl(57, 48%, 68%)

HSB

hsb(57, 36%, 84%)

CMYK

cmyk(0%, 2%, 36%, 16%)

Oklch

oklch(84.7% 0.094 105.5)

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

#978F8C

Ash · Gray · Silver Sand

HEX

#978F8C

RGB

rgb(151, 143, 140)

HSL

hsl(16, 5%, 57%)

HSB

hsb(16, 7%, 59%)

CMYK

cmyk(0%, 5%, 7%, 41%)

Oklch

oklch(65.6% 0.011 41.8)

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

#B9C2AF

Willow Green · Silver · Apple Green

HEX

#B9C2AF

RGB

rgb(185, 194, 175)

HSL

hsl(88, 13%, 72%)

HSB

hsb(88, 10%, 76%)

CMYK

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

Oklch

oklch(80.2% 0.028 127.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECC3BF

C0E9EC

Analogous

ECC0D3

ECC3BF

ECDAC0

Triadic

ECC3BF

C0ECC4

C4C0EC

Split-Comp.

ECC3BF

C0ECDA

C0D3EC

Tetradic

ECC3BF

D3ECC0

C0E9EC

DAC0EC

Contrast Matrix WCAG 2.1 Contrast

ECC3BF	F3EDCD	D5D188	978F8C	B9C2AF
—	1.4 Fail	1.0 Fail	2.0 Fail	1.2 Fail
1.4 Fail	—	1.3 Fail	2.7 Fail	1.6 Fail
1.0 Fail	1.3 Fail	—	2.0 Fail	1.2 Fail
2.0 Fail	2.7 Fail	2.0 Fail	—	1.7 Fail
1.2 Fail	1.6 Fail	1.2 Fail	1.7 Fail	—

White BG

1.6Fail

1.2Fail

1.6Fail

3.2AA Large

1.8Fail

Black BG

13.1AAA

17.8AAA

13.3AAA

6.6AA

11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADAC0

F0F0D5

D3D39A

94938D

BDBDB4

Deuteranopia

DDE0C0

F1F1D7

D4D49E

94958D

BCBCB5

Tritanopia

EAC1C1

F3DBDC

D5A8AB

978D8D

B9B7B8

Achromatopsia

CFCFCF

EBEBEB

CACACA

919191

BDBDBD

Shades & Tints Shades & Tints

#ECC3BF

Dark

Light

#F3EDCD

Dark

Light

#D5D188

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecc3bf;
  --color-2: #f3edcd;
  --color-3: #d5d188;
  --color-4: #978f8c;
  --color-5: #b9c2af;
}

SCSS

$color-1: #ecc3bf;
$color-2: #f3edcd;
$color-3: #d5d188;
$color-4: #978f8c;
$color-5: #b9c2af;

TAILWIND

colors: {
  'brand-1': '#ecc3bf',
  'brand-2': '#f3edcd',
  'brand-3': '#d5d188',
  'brand-4': '#978f8c',
  'brand-5': '#b9c2af',
}

RGB Array

[236, 195, 191], [243, 237, 205], [213, 209, 136], [151, 143, 140], [185, 194, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #ECC3BF, #F3EDCD, #D5D188, #978F8C, #B9C2AF 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: #ecc3bf; --color-2: #f3edcd; --color-3: #d5d188; --color-4: #978f8c; --color-5: #b9c2af. 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