#85736F + #F5BB8B + #D9CEB0 + #E3C4AF + #E8B5BC · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#85736F

Crimson · Gray · Warm Gray

HEX

#85736F

RGB

rgb(133, 115, 111)

HSL

hsl(11, 9%, 48%)

HSB

hsb(11, 17%, 52%)

CMYK

cmyk(0%, 14%, 17%, 48%)

Oklch

oklch(57.1% 0.023 32.6)

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

#F5BB8B

Apricot · BurlyWood · Warm Sun

HEX

#F5BB8B

RGB

rgb(245, 187, 139)

HSL

hsl(27, 84%, 75%)

HSB

hsb(27, 43%, 96%)

CMYK

cmyk(0%, 24%, 43%, 4%)

Oklch

oklch(83.4% 0.092 60.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D9CEB0

Goose Yellow · Wheat · Lemon Cream

HEX

#D9CEB0

RGB

rgb(217, 206, 176)

HSL

hsl(44, 35%, 77%)

HSB

hsb(44, 19%, 85%)

CMYK

cmyk(0%, 5%, 19%, 15%)

Oklch

oklch(85.3% 0.042 90.3)

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

#E3C4AF

Apricot · Wheat · Peach Orange

HEX

#E3C4AF

RGB

rgb(227, 196, 175)

HSL

hsl(24, 48%, 79%)

HSB

hsb(24, 23%, 89%)

CMYK

cmyk(0%, 14%, 23%, 11%)

Oklch

oklch(84.1% 0.045 56.1)

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

#E8B5BC

Peach Pink · LightPink · Cherry Blossom

HEX

#E8B5BC

RGB

rgb(232, 181, 188)

HSL

hsl(352, 53%, 81%)

HSB

hsb(352, 22%, 91%)

CMYK

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

Oklch

oklch(82.1% 0.060 9.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

85736F

6F8185

Analogous

856F76

85736F

857E6F

Triadic

85736F

6F8573

736F85

Split-Comp.

85736F

6F857E

6F7685

Tetradic

85736F

76856F

6F8185

7E6F85

Contrast Matrix WCAG 2.1 Contrast

85736F	F5BB8B	D9CEB0	E3C4AF	E8B5BC
—	2.6 Fail	2.9 Fail	2.7 Fail	2.5 Fail
2.6 Fail	—	1.1 Fail	1.0 Fail	1.1 Fail
2.9 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
2.7 Fail	1.0 Fail	1.0 Fail	—	1.1 Fail
2.5 Fail	1.1 Fail	1.1 Fail	1.1 Fail	—

White BG

4.5AA Large

1.7Fail

1.6Fail

1.8Fail

Black BG

4.7AA

12.4AAA

13.4AAA

12.8AAA

11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7D70

DCDB97

D4D4B7

D6D5B4

D2D1BA

Deuteranopia

7E8070

DFE499

D5D6B9

D7DAB5

D5D9BA

Tritanopia

847171

F2A0A2

D8BDBE

E1B8B9

E5B9B9

Achromatopsia

787878

C7C7C7

CECECE

CBCBCB

C5C5C5

Shades & Tints Shades & Tints

#85736F

Dark

Light

#F5BB8B

Dark

Light

#D9CEB0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #85736f;
  --color-2: #f5bb8b;
  --color-3: #d9ceb0;
  --color-4: #e3c4af;
  --color-5: #e8b5bc;
}

SCSS

$color-1: #85736f;
$color-2: #f5bb8b;
$color-3: #d9ceb0;
$color-4: #e3c4af;
$color-5: #e8b5bc;

TAILWIND

colors: {
  'brand-1': '#85736f',
  'brand-2': '#f5bb8b',
  'brand-3': '#d9ceb0',
  'brand-4': '#e3c4af',
  'brand-5': '#e8b5bc',
}

RGB Array

[133, 115, 111], [245, 187, 139], [217, 206, 176], [227, 196, 175], [232, 181, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #85736F, #F5BB8B, #D9CEB0, #E3C4AF, #E8B5BC 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: #85736f; --color-2: #f5bb8b; --color-3: #d9ceb0; --color-4: #e3c4af; --color-5: #e8b5bc. 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