#C6D5AE + #F1EA9B + #F7C869 + #8F7B55 + #D6C584 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C6D5AE

Willow Green · Silver · Apple Green

HEX

#C6D5AE

RGB

rgb(198, 213, 174)

HSL

hsl(83, 32%, 76%)

HSB

hsb(83, 18%, 84%)

CMYK

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

Oklch

oklch(85.1% 0.055 124.7)

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

#F1EA9B

Fresh Green · Khaki · Lemon Cream

HEX

#F1EA9B

RGB

rgb(241, 234, 155)

HSL

hsl(55, 75%, 78%)

HSB

hsb(55, 36%, 95%)

CMYK

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

Oklch

oklch(92.5% 0.100 103.8)

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

#F7C869

Ginger · SandyBrown · Sunflower

HEX

#F7C869

RGB

rgb(247, 200, 105)

HSL

hsl(40, 90%, 69%)

HSB

hsb(40, 57%, 97%)

CMYK

cmyk(0%, 19%, 57%, 3%)

Oklch

oklch(85.5% 0.125 83.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#8F7B55

Ochre · Gray · Amber Brown

HEX

#8F7B55

RGB

rgb(143, 123, 85)

HSL

hsl(39, 25%, 45%)

HSB

hsb(39, 41%, 56%)

CMYK

cmyk(0%, 14%, 41%, 44%)

Oklch

oklch(59.2% 0.059 83.0)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#D6C584

Ginger · BurlyWood · Sunflower

HEX

#D6C584

RGB

rgb(214, 197, 132)

HSL

hsl(48, 50%, 68%)

HSB

hsb(48, 38%, 84%)

CMYK

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

Oklch

oklch(82.3% 0.086 95.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C6D5AE

BDAED5

Analogous

D5D1AE

C6D5AE

B3D5AE

Triadic

C6D5AE

AEC6D5

D5AEC6

Split-Comp.

C6D5AE

AEB3D5

D1AED5

Tetradic

C6D5AE

AED5D1

BDAED5

D5AEB3

Contrast Matrix WCAG 2.1 Contrast

C6D5AE	F1EA9B	F7C869	8F7B55	D6C584
—	1.3 Fail	1.0 Fail	2.6 Fail	1.1 Fail
1.3 Fail	—	1.3 Fail	3.3 AA Large	1.4 Fail
1.0 Fail	1.3 Fail	—	2.6 Fail	1.1 Fail
2.6 Fail	3.3 AA Large	2.6 Fail	—	2.4 Fail
1.1 Fail	1.4 Fail	1.1 Fail	2.4 Fail	—

White BG

1.6Fail

1.2Fail

1.6Fail

4.1AA Large

1.7Fail

Black BG

13.5AAA

17.0AAA

13.4AAA

5.1AA

12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCDB7

EEEEAE

E3E280

86865E

CFCE94

Deuteranopia

CCCBBA

EEEFB3

E5E986

888960

D0D198

Tritanopia

C7BFC1

F1BDC1

F59296

8E6567

D5A0A3

Achromatopsia

CCCCCC

E3E3E3

CBCBCB

7D7D7D

C3C3C3

Shades & Tints Shades & Tints

#C6D5AE

Dark

Light

#F1EA9B

Dark

Light

#F7C869

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c6d5ae;
  --color-2: #f1ea9b;
  --color-3: #f7c869;
  --color-4: #8f7b55;
  --color-5: #d6c584;
}

SCSS

$color-1: #c6d5ae;
$color-2: #f1ea9b;
$color-3: #f7c869;
$color-4: #8f7b55;
$color-5: #d6c584;

TAILWIND

colors: {
  'brand-1': '#c6d5ae',
  'brand-2': '#f1ea9b',
  'brand-3': '#f7c869',
  'brand-4': '#8f7b55',
  'brand-5': '#d6c584',
}

RGB Array

[198, 213, 174], [241, 234, 155], [247, 200, 105], [143, 123, 85], [214, 197, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #C6D5AE, #F1EA9B, #F7C869, #8F7B55, #D6C584 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: #c6d5ae; --color-2: #f1ea9b; --color-3: #f7c869; --color-4: #8f7b55; --color-5: #d6c584. 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