#F6E4CC + #F2D0B4 + #D9CA93 + #B7B675 + #E5978A · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#F6E4CC

Goose Yellow · Bisque · Peach Orange

HEX

#F6E4CC

RGB

rgb(246, 228, 204)

HSL

hsl(34, 70%, 88%)

HSB

hsb(34, 17%, 96%)

CMYK

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

Oklch

oklch(92.7% 0.037 75.2)

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

#F2D0B4

Apricot · Wheat · Peach Orange

HEX

#F2D0B4

RGB

rgb(242, 208, 180)

HSL

hsl(27, 70%, 83%)

HSB

hsb(27, 26%, 95%)

CMYK

cmyk(0%, 14%, 26%, 5%)

Oklch

oklch(87.9% 0.054 61.5)

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

#D9CA93

Goose Yellow · BurlyWood · Sunflower

HEX

#D9CA93

RGB

rgb(217, 202, 147)

HSL

hsl(47, 48%, 71%)

HSB

hsb(47, 32%, 85%)

CMYK

cmyk(0%, 7%, 32%, 15%)

Oklch

oklch(83.8% 0.074 94.7)

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

#B7B675

Autumn Sage · Tan · Sunflower

HEX

#B7B675

RGB

rgb(183, 182, 117)

HSL

hsl(59, 31%, 59%)

HSB

hsb(59, 36%, 72%)

CMYK

cmyk(0%, 1%, 36%, 28%)

Oklch

oklch(76.2% 0.086 107.5)

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

#E5978A

Peach Pink · DarkSalmon · Coral Red

HEX

#E5978A

RGB

rgb(229, 151, 138)

HSL

hsl(9, 64%, 72%)

HSB

hsb(9, 40%, 90%)

CMYK

cmyk(0%, 34%, 40%, 10%)

Oklch

oklch(75.1% 0.097 29.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6E4CC

CBDEF6

Analogous

F6CECB

F6E4CC

F3F6CB

Triadic

F6E4CC

CBF6E3

E3CBF6

Split-Comp.

F6E4CC

CBF3F6

CECBF6

Tetradic

F6E4CC

CBF6CE

CBDEF6

F6CBF3

Contrast Matrix WCAG 2.1 Contrast

F6E4CC	F2D0B4	D9CA93	B7B675	E5978A
—	1.2 Fail	1.3 Fail	1.7 Fail	1.9 Fail
1.2 Fail	—	1.1 Fail	1.5 Fail	1.6 Fail
1.3 Fail	1.1 Fail	—	1.3 Fail	1.4 Fail
1.7 Fail	1.5 Fail	1.3 Fail	—	1.1 Fail
1.9 Fail	1.6 Fail	1.4 Fail	1.1 Fail	—

White BG

1.2Fail

1.5Fail

1.6Fail

2.1Fail

2.3Fail

Black BG

16.9AAA

14.5AAA

12.8AAA

10.0AAA

9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEED2

E3E3BB

D3D2A0

B7B785

C3C38D

Deuteranopia

EFF1D3

E5E8BC

D3D4A4

B7B789

C8CE8E

Tritanopia

F5D6D7

F0C0C1

D8ABAD

B79194

E19090

Achromatopsia

E7E7E7

D7D7D7

C8C8C8

AFAFAF

ADADAD

Shades & Tints Shades & Tints

#F6E4CC

Dark

Light

#F2D0B4

Dark

Light

#D9CA93

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6e4cc;
  --color-2: #f2d0b4;
  --color-3: #d9ca93;
  --color-4: #b7b675;
  --color-5: #e5978a;
}

SCSS

$color-1: #f6e4cc;
$color-2: #f2d0b4;
$color-3: #d9ca93;
$color-4: #b7b675;
$color-5: #e5978a;

TAILWIND

colors: {
  'brand-1': '#f6e4cc',
  'brand-2': '#f2d0b4',
  'brand-3': '#d9ca93',
  'brand-4': '#b7b675',
  'brand-5': '#e5978a',
}

RGB Array

[246, 228, 204], [242, 208, 180], [217, 202, 147], [183, 182, 117], [229, 151, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F6E4CC, #F2D0B4, #D9CA93, #B7B675, #E5978A 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: #f6e4cc; --color-2: #f2d0b4; --color-3: #d9ca93; --color-4: #b7b675; --color-5: #e5978a. 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