#FCCDC5 + #F4E2BE + #E1D9CE + #CBCDCA + #B3AFAC · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#FCCDC5

Peach Pink · Pink · Cherry Blossom

HEX

#FCCDC5

RGB

rgb(252, 205, 197)

HSL

hsl(9, 90%, 88%)

HSB

hsb(9, 22%, 99%)

CMYK

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

Oklch

oklch(88.7% 0.055 29.4)

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

#F4E2BE

Goose Yellow · Wheat · Lemon Cream

HEX

#F4E2BE

RGB

rgb(244, 226, 190)

HSL

hsl(40, 71%, 85%)

HSB

hsb(40, 22%, 96%)

CMYK

cmyk(0%, 7%, 22%, 4%)

Oklch

oklch(91.8% 0.051 84.5)

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

#E1D9CE

Goose Yellow · LightGray · Peach Orange

HEX

#E1D9CE

RGB

rgb(225, 217, 206)

HSL

hsl(35, 24%, 85%)

HSB

hsb(35, 8%, 88%)

CMYK

cmyk(0%, 4%, 8%, 12%)

Oklch

oklch(88.9% 0.017 76.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#CBCDCA

Silver Gray · LightGray · Pearl Gray

HEX

#CBCDCA

RGB

rgb(203, 205, 202)

HSL

hsl(100, 3%, 80%)

HSB

hsb(100, 1%, 80%)

CMYK

cmyk(1%, 0%, 1%, 20%)

Oklch

oklch(84.6% 0.005 134.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#B3AFAC

Ash · DarkGray · Silver Sand

HEX

#B3AFAC

RGB

rgb(179, 175, 172)

HSL

hsl(26, 4%, 69%)

HSB

hsb(26, 4%, 70%)

CMYK

cmyk(0%, 2%, 4%, 30%)

Oklch

oklch(75.6% 0.006 59.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCCDC5

C5F4FC

Analogous

FCC5D8

FCCDC5

FCE9C5

Triadic

FCCDC5

C5FCCD

CDC5FC

Split-Comp.

FCCDC5

C5FCE9

C5D8FC

Tetradic

FCCDC5

D8FCC5

C5F4FC

E9C5FC

Contrast Matrix WCAG 2.1 Contrast

FCCDC5	F4E2BE	E1D9CE	CBCDCA	B3AFAC
—	1.1 Fail	1.0 Fail	1.1 Fail	1.5 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.7 Fail
1.0 Fail	1.1 Fail	—	1.1 Fail	1.6 Fail
1.1 Fail	1.3 Fail	1.1 Fail	—	1.4 Fail
1.5 Fail	1.7 Fail	1.6 Fail	1.4 Fail	—

White BG

1.4Fail

1.3Fail

1.4Fail

1.6Fail

2.2Fail

Black BG

14.7AAA

16.5AAA

15.0AAA

13.1AAA

9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E7C7

ECECC7

DEDDD1

CCCCCB

B1B1AD

Deuteranopia

EAEEC7

EDEFC9

DEDFD1

CCCCCB

B2B2AD

Tritanopia

FAC8C9

F3CECF

E1D3D3

CBCBCB

B3ADAD

Achromatopsia

DADADA

E3E3E3

DADADA

CCCCCC

B0B0B0

Shades & Tints Shades & Tints

#FCCDC5

Dark

Light

#F4E2BE

Dark

Light

#E1D9CE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fccdc5;
  --color-2: #f4e2be;
  --color-3: #e1d9ce;
  --color-4: #cbcdca;
  --color-5: #b3afac;
}

SCSS

$color-1: #fccdc5;
$color-2: #f4e2be;
$color-3: #e1d9ce;
$color-4: #cbcdca;
$color-5: #b3afac;

TAILWIND

colors: {
  'brand-1': '#fccdc5',
  'brand-2': '#f4e2be',
  'brand-3': '#e1d9ce',
  'brand-4': '#cbcdca',
  'brand-5': '#b3afac',
}

RGB Array

[252, 205, 197], [244, 226, 190], [225, 217, 206], [203, 205, 202], [179, 175, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FCCDC5, #F4E2BE, #E1D9CE, #CBCDCA, #B3AFAC 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: #fccdc5; --color-2: #f4e2be; --color-3: #e1d9ce; --color-4: #cbcdca; --color-5: #b3afac. 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