#858E67 + #E7CDA1 + #D3D0A5 + #C5D1A9 + #B5D4AB · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#858E67

Grass Green · Gray · Olive Green

HEX

#858E67

RGB

rgb(133, 142, 103)

HSL

hsl(74, 16%, 48%)

HSB

hsb(74, 27%, 56%)

CMYK

cmyk(6%, 0%, 27%, 44%)

Oklch

oklch(62.9% 0.057 118.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#E7CDA1

Goose Yellow · Wheat · Peach Orange

HEX

#E7CDA1

RGB

rgb(231, 205, 161)

HSL

hsl(38, 59%, 77%)

HSB

hsb(38, 30%, 91%)

CMYK

cmyk(0%, 11%, 30%, 9%)

Oklch

oklch(85.9% 0.065 80.7)

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

#D3D0A5

Fresh Green · Silver · Sunflower

HEX

#D3D0A5

RGB

rgb(211, 208, 165)

HSL

hsl(56, 34%, 74%)

HSB

hsb(56, 22%, 83%)

CMYK

cmyk(0%, 1%, 22%, 17%)

Oklch

oklch(84.9% 0.057 104.2)

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

#C5D1A9

Willow Green · Silver · Apple Green

HEX

#C5D1A9

RGB

rgb(197, 209, 169)

HSL

hsl(78, 30%, 74%)

HSB

hsb(78, 19%, 82%)

CMYK

cmyk(6%, 0%, 19%, 18%)

Oklch

oklch(84.1% 0.055 121.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#B5D4AB

Celadon · Silver · Apple Green

HEX

#B5D4AB

RGB

rgb(181, 212, 171)

HSL

hsl(105, 32%, 75%)

HSB

hsb(105, 19%, 83%)

CMYK

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

Oklch

oklch(83.6% 0.065 138.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

858E67

70678E

Analogous

8E8467

858E67

718E67

Triadic

858E67

67858E

8E6785

Split-Comp.

858E67

67718E

84678E

Tetradic

858E67

678E84

70678E

8E6771

Contrast Matrix WCAG 2.1 Contrast

858E67	E7CDA1	D3D0A5	C5D1A9	B5D4AB
—	2.3 Fail	2.2 Fail	2.2 Fail	2.1 Fail
2.3 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
2.2 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
2.2 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
2.1 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

3.5AA Large

1.5Fail

1.6Fail

Black BG

6.1AA

13.6AAA

13.3AAA

13.1AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

898970

DCDCAC

D2D2AF

CACAB3

C2C3B5

Deuteranopia

888873

DDDFAE

D2D2B2

CAC9B5

C1BEB7

Tritanopia

85787A

E6B4B6

D3B8B9

C6BABC

B7BDBE

Achromatopsia

878787

D0D0D0

CCCCCC

C9C9C9

C6C6C6

Shades & Tints Shades & Tints

#858E67

Dark

Light

#E7CDA1

Dark

Light

#D3D0A5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #858e67;
  --color-2: #e7cda1;
  --color-3: #d3d0a5;
  --color-4: #c5d1a9;
  --color-5: #b5d4ab;
}

SCSS

$color-1: #858e67;
$color-2: #e7cda1;
$color-3: #d3d0a5;
$color-4: #c5d1a9;
$color-5: #b5d4ab;

TAILWIND

colors: {
  'brand-1': '#858e67',
  'brand-2': '#e7cda1',
  'brand-3': '#d3d0a5',
  'brand-4': '#c5d1a9',
  'brand-5': '#b5d4ab',
}

RGB Array

[133, 142, 103], [231, 205, 161], [211, 208, 165], [197, 209, 169], [181, 212, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #858E67, #E7CDA1, #D3D0A5, #C5D1A9, #B5D4AB 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: #858e67; --color-2: #e7cda1; --color-3: #d3d0a5; --color-4: #c5d1a9; --color-5: #b5d4ab. 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 sunset-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