#B4C1AD + #CFD0AE + #EFDAA1 + #D6B884 + #D3A569 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B4C1AD

Celadon · Silver · Apple Green

HEX

#B4C1AD

RGB

rgb(180, 193, 173)

HSL

hsl(99, 14%, 72%)

HSB

hsb(99, 10%, 76%)

CMYK

cmyk(7%, 0%, 10%, 24%)

Oklch

oklch(79.5% 0.031 134.4)

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

#CFD0AE

Fresh Green · Silver · Sunflower

HEX

#CFD0AE

RGB

rgb(207, 208, 174)

HSL

hsl(62, 27%, 75%)

HSB

hsb(62, 16%, 82%)

CMYK

cmyk(0%, 0%, 16%, 18%)

Oklch

oklch(84.8% 0.046 108.7)

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

#EFDAA1

Goose Yellow · Wheat · Lemon Cream

HEX

#EFDAA1

RGB

rgb(239, 218, 161)

HSL

hsl(44, 71%, 78%)

HSB

hsb(44, 33%, 94%)

CMYK

cmyk(0%, 9%, 33%, 6%)

Oklch

oklch(89.2% 0.077 90.2)

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

#D6B884

Ginger · BurlyWood · Warm Sun

HEX

#D6B884

RGB

rgb(214, 184, 132)

HSL

hsl(38, 50%, 68%)

HSB

hsb(38, 38%, 84%)

CMYK

cmyk(0%, 14%, 38%, 16%)

Oklch

oklch(79.6% 0.076 81.0)

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

#D3A569

Ginger · DarkSalmon · Warm Sun

HEX

#D3A569

RGB

rgb(211, 165, 105)

HSL

hsl(34, 55%, 62%)

HSB

hsb(34, 50%, 83%)

CMYK

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

Oklch

oklch(75.1% 0.094 72.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4C1AD

BBAEC2

Analogous

BFC2AE

B4C1AD

AEC2B1

Triadic

B4C1AD

AEB5C2

C2AEB5

Split-Comp.

B4C1AD

B1AEC2

C2AEBF

Tetradic

B4C1AD

AEBFC2

BBAEC2

C2B1AE

Contrast Matrix WCAG 2.1 Contrast

B4C1AD	CFD0AE	EFDAA1	D6B884	D3A569
—	1.2 Fail	1.4 Fail	1.0 Fail	1.2 Fail
1.2 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.4 Fail	1.1 Fail	—	1.4 Fail	1.6 Fail
1.0 Fail	1.2 Fail	1.4 Fail	—	1.2 Fail
1.2 Fail	1.4 Fail	1.6 Fail	1.2 Fail	—

White BG

1.9Fail

1.6Fail

1.4Fail

1.9Fail

2.2Fail

Black BG

11.2AAA

13.3AAA

15.2AAA

11.0AAA

9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABAB2

CFCFB6

E6E6AF

C9C991

BFBF78

Deuteranopia

B9B8B3

CFCFB8

E7E9B2

CBCD94

C2C57B

Tritanopia

B5B6B7

CFBDBE

EEBABC

D49B9D

D18386

Achromatopsia

BBBBBB

CCCCCC

DADADA

BBBBBB

ACACAC

Shades & Tints Shades & Tints

#B4C1AD

Dark

Light

#CFD0AE

Dark

Light

#EFDAA1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4c1ad;
  --color-2: #cfd0ae;
  --color-3: #efdaa1;
  --color-4: #d6b884;
  --color-5: #d3a569;
}

SCSS

$color-1: #b4c1ad;
$color-2: #cfd0ae;
$color-3: #efdaa1;
$color-4: #d6b884;
$color-5: #d3a569;

TAILWIND

colors: {
  'brand-1': '#b4c1ad',
  'brand-2': '#cfd0ae',
  'brand-3': '#efdaa1',
  'brand-4': '#d6b884',
  'brand-5': '#d3a569',
}

RGB Array

[180, 193, 173], [207, 208, 174], [239, 218, 161], [214, 184, 132], [211, 165, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #B4C1AD, #CFD0AE, #EFDAA1, #D6B884, #D3A569 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: #b4c1ad; --color-2: #cfd0ae; --color-3: #efdaa1; --color-4: #d6b884; --color-5: #d3a569. 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 earth-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