#F7DDB2 + #D0B87D + #AEAA77 + #90A688 + #68ADA5 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F7DDB2

Goose Yellow · Wheat · Peach Orange

HEX

#F7DDB2

RGB

rgb(247, 221, 178)

HSL

hsl(37, 81%, 83%)

HSB

hsb(37, 28%, 97%)

CMYK

cmyk(0%, 11%, 28%, 3%)

Oklch

oklch(90.8% 0.063 80.2)

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

#D0B87D

Ginger · Tan · Sunflower

HEX

#D0B87D

RGB

rgb(208, 184, 125)

HSL

hsl(43, 47%, 65%)

HSB

hsb(43, 40%, 82%)

CMYK

cmyk(0%, 12%, 40%, 18%)

Oklch

oklch(79.0% 0.082 88.3)

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

#AEAA77

Autumn Sage · Tan · Sunflower

HEX

#AEAA77

RGB

rgb(174, 170, 119)

HSL

hsl(56, 25%, 57%)

HSB

hsb(56, 32%, 68%)

CMYK

cmyk(0%, 2%, 32%, 32%)

Oklch

oklch(72.9% 0.069 104.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#90A688

Celadon · DarkSeaGreen · Olive Green

HEX

#90A688

RGB

rgb(144, 166, 136)

HSL

hsl(104, 14%, 59%)

HSB

hsb(104, 18%, 65%)

CMYK

cmyk(13%, 0%, 18%, 35%)

Oklch

oklch(70.0% 0.049 137.4)

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

#68ADA5

Mineral Blue · CadetBlue · Lake Green

HEX

#68ADA5

RGB

rgb(104, 173, 165)

HSL

hsl(173, 30%, 54%)

HSB

hsb(173, 40%, 68%)

CMYK

cmyk(40%, 0%, 5%, 32%)

Oklch

oklch(70.0% 0.071 186.3)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7DDB2

B1CBF7

Analogous

F7B9B1

F7DDB2

EFF7B1

Triadic

F7DDB2

B1F7DC

DCB1F7

Split-Comp.

F7DDB2

B1EFF7

B9B1F7

Tetradic

F7DDB2

B1F7B9

B1CBF7

F7B1EF

Contrast Matrix WCAG 2.1 Contrast

F7DDB2	D0B87D	AEAA77	90A688	68ADA5
—	1.5 Fail	1.8 Fail	2.0 Fail	2.0 Fail
1.5 Fail	—	1.2 Fail	1.4 Fail	1.3 Fail
1.8 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
2.0 Fail	1.4 Fail	1.1 Fail	—	1.0 Fail
2.0 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

1.3Fail

1.9Fail

2.4Fail

2.6Fail

Black BG

15.9AAA

10.8AAA

8.8AAA

8.0AAA

8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECBC

C6C58B

ACAC83

9A9A8F

8686A7

Deuteranopia

EDEFBF

C7C98F

ADAD86

989791

827DA7

Tritanopia

F6C5C6

CF9799

AE8D8F

919596

6BA8A9

Achromatopsia

E0E0E0

B8B8B8

A5A5A5

9C9C9C

979797

Shades & Tints Shades & Tints

#F7DDB2

Dark

Light

#D0B87D

Dark

Light

#AEAA77

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7ddb2;
  --color-2: #d0b87d;
  --color-3: #aeaa77;
  --color-4: #90a688;
  --color-5: #68ada5;
}

SCSS

$color-1: #f7ddb2;
$color-2: #d0b87d;
$color-3: #aeaa77;
$color-4: #90a688;
$color-5: #68ada5;

TAILWIND

colors: {
  'brand-1': '#f7ddb2',
  'brand-2': '#d0b87d',
  'brand-3': '#aeaa77',
  'brand-4': '#90a688',
  'brand-5': '#68ada5',
}

RGB Array

[247, 221, 178], [208, 184, 125], [174, 170, 119], [144, 166, 136], [104, 173, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #F7DDB2, #D0B87D, #AEAA77, #90A688, #68ADA5 is ideal for: corporate websites, product showcases, portfolios. 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: #f7ddb2; --color-2: #d0b87d; --color-3: #aeaa77; --color-4: #90a688; --color-5: #68ada5. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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