#F3EBC2 + #E7DFB2 + #DEC1AD + #757A85 + #B3BFD2 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#F3EBC2

Fresh Green · Bisque · Lemon Cream

HEX

#F3EBC2

RGB

rgb(243, 235, 194)

HSL

hsl(50, 67%, 86%)

HSB

hsb(50, 20%, 95%)

CMYK

cmyk(0%, 3%, 20%, 5%)

Oklch

oklch(93.6% 0.054 98.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#E7DFB2

Fresh Green · Wheat · Lemon Cream

HEX

#E7DFB2

RGB

rgb(231, 223, 178)

HSL

hsl(51, 52%, 80%)

HSB

hsb(51, 23%, 91%)

CMYK

cmyk(0%, 3%, 23%, 9%)

Oklch

oklch(89.9% 0.060 99.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#DEC1AD

Apricot · Silver · Peach Orange

HEX

#DEC1AD

RGB

rgb(222, 193, 173)

HSL

hsl(24, 43%, 77%)

HSB

hsb(24, 22%, 87%)

CMYK

cmyk(0%, 13%, 22%, 13%)

Oklch

oklch(83.0% 0.043 56.7)

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

#757A85

Ink Gray · Gray · Warm Gray

HEX

#757A85

RGB

rgb(117, 122, 133)

HSL

hsl(221, 6%, 49%)

HSB

hsb(221, 12%, 52%)

CMYK

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

Oklch

oklch(57.9% 0.018 266.2)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#B3BFD2

Azure · LightSteelBlue · Cobalt Blue

HEX

#B3BFD2

RGB

rgb(179, 191, 210)

HSL

hsl(217, 26%, 76%)

HSB

hsb(217, 15%, 82%)

CMYK

cmyk(15%, 9%, 0%, 18%)

Oklch

oklch(80.1% 0.030 259.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3EBC2

C3CBF3

Analogous

F3D3C3

F3EBC2

E3F3C3

Triadic

F3EBC2

C3F3EB

EBC3F3

Split-Comp.

F3EBC2

C3E3F3

D3C3F3

Tetradic

F3EBC2

C3F3D3

C3CBF3

F3C3E3

Contrast Matrix WCAG 2.1 Contrast

F3EBC2	E7DFB2	DEC1AD	757A85	B3BFD2
—	1.1 Fail	1.4 Fail	3.6 AA Large	1.5 Fail
1.1 Fail	—	1.3 Fail	3.2 AA Large	1.4 Fail
1.4 Fail	1.3 Fail	—	2.5 Fail	1.1 Fail
3.6 AA Large	3.2 AA Large	2.5 Fail	—	2.3 Fail
1.5 Fail	1.4 Fail	1.1 Fail	2.3 Fail	—

White BG

1.2Fail

1.3Fail

1.7Fail

4.3AA Large

1.9Fail

Black BG

17.5AAA

15.6AAA

12.3AAA

4.9AA

11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0EFCC

E4E3BD

D1D1B2

777782

B8B8CD

Deuteranopia

F0F1CE

E4E5C0

D3D5B3

777782

B8B7CC

Tritanopia

F3D4D5

E7C5C7

DDB6B7

758080

B4CAC9

Achromatopsia

E9E9E9

DCDCDC

C7C7C7

7A7A7A

BEBEBE

Shades & Tints Shades & Tints

#F3EBC2

Dark

Light

#E7DFB2

Dark

Light

#DEC1AD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3ebc2;
  --color-2: #e7dfb2;
  --color-3: #dec1ad;
  --color-4: #757a85;
  --color-5: #b3bfd2;
}

SCSS

$color-1: #f3ebc2;
$color-2: #e7dfb2;
$color-3: #dec1ad;
$color-4: #757a85;
$color-5: #b3bfd2;

TAILWIND

colors: {
  'brand-1': '#f3ebc2',
  'brand-2': '#e7dfb2',
  'brand-3': '#dec1ad',
  'brand-4': '#757a85',
  'brand-5': '#b3bfd2',
}

RGB Array

[243, 235, 194], [231, 223, 178], [222, 193, 173], [117, 122, 133], [179, 191, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F3EBC2, #E7DFB2, #DEC1AD, #757A85, #B3BFD2 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: #f3ebc2; --color-2: #e7dfb2; --color-3: #dec1ad; --color-4: #757a85; --color-5: #b3bfd2. 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