← Back to Editor

#F4EFDC · #BBE6DC · #F5E1BE · #BC736C · #CDB300

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#F4EFDC

Goose Yellow · Beige · Lemon Cream

HEX
#F4EFDC
RGB
rgb(244, 239, 220)
HSL
hsl(47, 52%, 91%)
HSB
hsb(47, 10%, 96%)
CMYK
cmyk(0%, 2%, 10%, 4%)
Oklch
oklch(95.1% 0.026 94.7)

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

#BBE6DC

Jade · LightBlue · Glacier Blue

HEX
#BBE6DC
RGB
rgb(187, 230, 220)
HSL
hsl(166, 46%, 82%)
HSB
hsb(166, 19%, 90%)
CMYK
cmyk(19%, 0%, 4%, 10%)
Oklch
oklch(89.2% 0.047 179.5)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#F5E1BE

Goose Yellow · Wheat · Peach Orange

HEX
#F5E1BE
RGB
rgb(245, 225, 190)
HSL
hsl(38, 73%, 85%)
HSB
hsb(38, 22%, 96%)
CMYK
cmyk(0%, 8%, 22%, 4%)
Oklch
oklch(91.7% 0.051 81.6)

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

#BC736C

Crimson · LightCoral · Passion Red

HEX
#BC736C
RGB
rgb(188, 115, 108)
HSL
hsl(5, 37%, 58%)
HSB
hsb(5, 43%, 74%)
CMYK
cmyk(0%, 39%, 43%, 26%)
Oklch
oklch(63.2% 0.094 25.9)

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

#CDB300

Autumn Sage · GoldenRod · Honey Gold

HEX
#CDB300
RGB
rgb(205, 179, 0)
HSL
hsl(52, 100%, 40%)
HSB
hsb(52, 100%, 80%)
CMYK
cmyk(0%, 13%, 100%, 20%)
Oklch
oklch(76.6% 0.159 98.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4EFDC
DCE1F4

Analogous

F4E3DC
F4EFDC
EDF4DC

Triadic

F4EFDC
DCF4EF
EFDCF4

Split-Comp.

F4EFDC
DCEDF4
E3DCF4

Tetradic

F4EFDC
DCF4E3
DCE1F4
F4DCED

Contrast Matrix WCAG 2.1 Contrast

F4EFDC
BBE6DC
F5E1BE
BC736C
CDB300
—
1.2
Fail
1.1
Fail
3.1
AA Large
1.8
Fail
1.2
Fail
—
1.1
Fail
2.7
Fail
1.5
Fail
1.1
Fail
1.1
Fail
—
2.8
Fail
1.6
Fail
3.1
AA Large
2.7
Fail
2.8
Fail
—
1.7
Fail
1.8
Fail
1.5
Fail
1.6
Fail
1.7
Fail
—
White BG
1.2Fail
1.4Fail
1.3Fail
3.6AA Large
2.1Fail
Black BG
18.2AAA
15.5AAA
16.4AAA
5.8AA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2E1
CECEDE
ECECC6
9C9C6E
C2C22B

Deuteranopia

F2F3E2
CBC8DF
EEEFC9
A1A66E
C3C536

Tritanopia

F4E4E5
BDE0E1
F4CDCF
B86F6F
CC4E55

Achromatopsia

EEEEEE
D8D8D8
E3E3E3
888888
A6A6A6

Shades & Tints Shades & Tints

#F4EFDC

Dark
Light

#BBE6DC

Dark
Light

#F5E1BE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4efdc;
  --color-2: #bbe6dc;
  --color-3: #f5e1be;
  --color-4: #bc736c;
  --color-5: #cdb300;
}

SCSS

$color-1: #f4efdc;
$color-2: #bbe6dc;
$color-3: #f5e1be;
$color-4: #bc736c;
$color-5: #cdb300;

TAILWIND

colors: {
  'brand-1': '#f4efdc',
  'brand-2': '#bbe6dc',
  'brand-3': '#f5e1be',
  'brand-4': '#bc736c',
  'brand-5': '#cdb300',
}

RGB Array

[244, 239, 220], [187, 230, 220], [245, 225, 190], [188, 115, 108], [205, 179, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F4EFDC, #BBE6DC, #F5E1BE, #BC736C, #CDB300 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f4efdc; --color-2: #bbe6dc; --color-3: #f5e1be; --color-4: #bc736c; --color-5: #cdb300. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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