#CFDCCA + #FAF2DB + #F8E6D0 + #F4D1CF + #EA9BB0 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#CFDCCA

Celadon · LightGray · Mint Green

HEX

#CFDCCA

RGB

rgb(207, 220, 202)

HSL

hsl(103, 20%, 83%)

HSB

hsb(103, 8%, 86%)

CMYK

cmyk(6%, 0%, 8%, 14%)

Oklch

oklch(88.0% 0.028 136.9)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#FAF2DB

Goose Yellow · Beige · Lemon Cream

HEX

#FAF2DB

RGB

rgb(250, 242, 219)

HSL

hsl(45, 76%, 92%)

HSB

hsb(45, 12%, 98%)

CMYK

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

Oklch

oklch(96.1% 0.031 91.0)

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

#F8E6D0

Goose Yellow · Bisque · Peach Orange

HEX

#F8E6D0

RGB

rgb(248, 230, 208)

HSL

hsl(33, 74%, 89%)

HSB

hsb(33, 16%, 97%)

CMYK

cmyk(0%, 7%, 16%, 3%)

Oklch

oklch(93.4% 0.035 72.9)

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

#F4D1CF

Peach Pink · Pink · Cherry Blossom

HEX

#F4D1CF

RGB

rgb(244, 209, 207)

HSL

hsl(3, 63%, 88%)

HSB

hsb(3, 15%, 96%)

CMYK

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

Oklch

oklch(89.0% 0.040 21.8)

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

#EA9BB0

Rouge · LightPink · Cherry Blossom

HEX

#EA9BB0

RGB

rgb(234, 155, 176)

HSL

hsl(344, 65%, 76%)

HSB

hsb(344, 34%, 92%)

CMYK

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

Oklch

oklch(77.3% 0.098 2.3)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFDCCA

D7CBDC

Analogous

D9DCCB

CFDCCA

CBDCCF

Triadic

CFDCCA

CBD0DC

DCCBD0

Split-Comp.

CFDCCA

CFCBDC

DCCBD9

Tetradic

CFDCCA

CBD9DC

D7CBDC

DCCFCB

Contrast Matrix WCAG 2.1 Contrast

CFDCCA	FAF2DB	F8E6D0	F4D1CF	EA9BB0
—	1.3 Fail	1.2 Fail	1.0 Fail	1.5 Fail
1.3 Fail	—	1.1 Fail	1.3 Fail	1.9 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.8 Fail
1.0 Fail	1.3 Fail	1.2 Fail	—	1.5 Fail
1.5 Fail	1.9 Fail	1.8 Fail	1.5 Fail	—

White BG

1.4Fail

1.1Fail

1.2Fail

1.4Fail

2.1Fail

Black BG

14.7AAA

18.8AAA

17.2AAA

14.9AAA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5CE

F7F6E1

F0F0D5

E5E5CF

C8C7AB

Deuteranopia

D4D3CF

F7F8E2

F1F3D7

E7E9D0

CCD2AA

Tritanopia

D0D2D3

FAE5E6

F7DADA

F2D0D0

E6A7A6

Achromatopsia

D6D6D6

F2F2F2

E9E9E9

DBDBDB

B5B5B5

Shades & Tints Shades & Tints

#CFDCCA

Dark

Light

#FAF2DB

Dark

Light

#F8E6D0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfdcca;
  --color-2: #faf2db;
  --color-3: #f8e6d0;
  --color-4: #f4d1cf;
  --color-5: #ea9bb0;
}

SCSS

$color-1: #cfdcca;
$color-2: #faf2db;
$color-3: #f8e6d0;
$color-4: #f4d1cf;
$color-5: #ea9bb0;

TAILWIND

colors: {
  'brand-1': '#cfdcca',
  'brand-2': '#faf2db',
  'brand-3': '#f8e6d0',
  'brand-4': '#f4d1cf',
  'brand-5': '#ea9bb0',
}

RGB Array

[207, 220, 202], [250, 242, 219], [248, 230, 208], [244, 209, 207], [234, 155, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #CFDCCA, #FAF2DB, #F8E6D0, #F4D1CF, #EA9BB0 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: #cfdcca; --color-2: #faf2db; --color-3: #f8e6d0; --color-4: #f4d1cf; --color-5: #ea9bb0. 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