#DED6B8 + #CFBD59 + #CC6E5C + #CF7796 + #BBC4C4 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#DED6B8

Goose Yellow · Wheat · Lemon Cream

HEX

#DED6B8

RGB

rgb(222, 214, 184)

HSL

hsl(47, 37%, 80%)

HSB

hsb(47, 17%, 87%)

CMYK

cmyk(0%, 4%, 17%, 13%)

Oklch

oklch(87.5% 0.041 94.8)

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

#CFBD59

Autumn Sage · SandyBrown · Sunflower

HEX

#CFBD59

RGB

rgb(207, 189, 89)

HSL

hsl(51, 55%, 58%)

HSB

hsb(51, 57%, 81%)

CMYK

cmyk(0%, 9%, 57%, 19%)

Oklch

oklch(79.4% 0.122 99.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CC6E5C

Crimson · LightCoral · Passion Red

HEX

#CC6E5C

RGB

rgb(204, 110, 92)

HSL

hsl(10, 52%, 58%)

HSB

hsb(10, 55%, 80%)

CMYK

cmyk(0%, 46%, 55%, 20%)

Oklch

oklch(64.1% 0.123 32.0)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#CF7796

Rouge · LightCoral · Rose Pink

HEX

#CF7796

RGB

rgb(207, 119, 150)

HSL

hsl(339, 48%, 64%)

HSB

hsb(339, 43%, 81%)

CMYK

cmyk(0%, 43%, 28%, 19%)

Oklch

oklch(67.4% 0.115 358.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#BBC4C4

Silver Gray · Silver · Pearl Gray

HEX

#BBC4C4

RGB

rgb(187, 196, 196)

HSL

hsl(180, 7%, 75%)

HSB

hsb(180, 5%, 77%)

CMYK

cmyk(5%, 0%, 0%, 23%)

Oklch

oklch(81.3% 0.010 197.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DED6B8

B9C1DF

Analogous

DFC4B9

DED6B8

D4DFB9

Triadic

DED6B8

B9DFD7

D7B9DF

Split-Comp.

DED6B8

B9D4DF

C4B9DF

Tetradic

DED6B8

B9DFC4

B9C1DF

DFB9D4

Contrast Matrix WCAG 2.1 Contrast

DED6B8	CFBD59	CC6E5C	CF7796	BBC4C4
—	1.3 Fail	2.4 Fail	2.1 Fail	1.2 Fail
1.3 Fail	—	1.9 Fail	1.6 Fail	1.1 Fail
2.4 Fail	1.9 Fail	—	1.1 Fail	2.0 Fail
2.1 Fail	1.6 Fail	1.1 Fail	—	1.8 Fail
1.2 Fail	1.1 Fail	2.0 Fail	1.8 Fail	—

White BG

1.5Fail

1.9Fail

3.5AA Large

3.1AA Large

1.8Fail

Black BG

14.4AAA

11.1AAA

6.0AA

6.7AA

11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDABF

C7C771

A3A260

A9A88E

BFBFC4

Deuteranopia

DBDCC1

C8CA77

A9B061

AEB58D

BEBEC4

Tritanopia

DEC5C6

CE8489

C76465

CB8987

BBC4C4

Achromatopsia

D5D5D5

B7B7B7

888888

959595

C1C1C1

Shades & Tints Shades & Tints

#DED6B8

Dark

Light

#CFBD59

Dark

Light

#CC6E5C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ded6b8;
  --color-2: #cfbd59;
  --color-3: #cc6e5c;
  --color-4: #cf7796;
  --color-5: #bbc4c4;
}

SCSS

$color-1: #ded6b8;
$color-2: #cfbd59;
$color-3: #cc6e5c;
$color-4: #cf7796;
$color-5: #bbc4c4;

TAILWIND

colors: {
  'brand-1': '#ded6b8',
  'brand-2': '#cfbd59',
  'brand-3': '#cc6e5c',
  'brand-4': '#cf7796',
  'brand-5': '#bbc4c4',
}

RGB Array

[222, 214, 184], [207, 189, 89], [204, 110, 92], [207, 119, 150], [187, 196, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #DED6B8, #CFBD59, #CC6E5C, #CF7796, #BBC4C4 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: #ded6b8; --color-2: #cfbd59; --color-3: #cc6e5c; --color-4: #cf7796; --color-5: #bbc4c4. 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