#DFDB92 + #CEAE63 + #989A72 + #67948D + #4E5C81 · 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

#DFDB92

Fresh Green · Khaki · Sunflower

HEX

#DFDB92

RGB

rgb(223, 219, 146)

HSL

hsl(57, 55%, 72%)

HSB

hsb(57, 35%, 87%)

CMYK

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

Oklch

oklch(87.8% 0.093 105.5)

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

#CEAE63

Ginger · SandyBrown · Sunflower

HEX

#CEAE63

RGB

rgb(206, 174, 99)

HSL

hsl(42, 52%, 60%)

HSB

hsb(42, 52%, 81%)

CMYK

cmyk(0%, 16%, 52%, 19%)

Oklch

oklch(76.3% 0.101 86.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#989A72

Autumn Sage · Gray · Sunflower

HEX

#989A72

RGB

rgb(152, 154, 114)

HSL

hsl(63, 17%, 53%)

HSB

hsb(63, 26%, 60%)

CMYK

cmyk(1%, 0%, 26%, 40%)

Oklch

oklch(67.4% 0.056 110.2)

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

#67948D

Mineral Blue · SlateGray · Mint Ice

HEX

#67948D

RGB

rgb(103, 148, 141)

HSL

hsl(171, 18%, 49%)

HSB

hsb(171, 30%, 58%)

CMYK

cmyk(30%, 0%, 5%, 42%)

Oklch

oklch(63.2% 0.050 184.0)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#4E5C81

Indigo · DarkSlateBlue · Navy Blue

HEX

#4E5C81

RGB

rgb(78, 92, 129)

HSL

hsl(224, 25%, 41%)

HSB

hsb(224, 40%, 51%)

CMYK

cmyk(40%, 29%, 0%, 49%)

Oklch

oklch(47.9% 0.063 268.1)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFDB92

9094DF

Analogous

DFB490

DFDB92

BCDF90

Triadic

DFDB92

90DFDB

DB90DF

Split-Comp.

DFDB92

90BCDF

B490DF

Tetradic

DFDB92

90DFB4

9094DF

DF90BC

Contrast Matrix WCAG 2.1 Contrast

DFDB92	CEAE63	989A72	67948D	4E5C81
—	1.5 Fail	2.0 Fail	2.4 Fail	4.6 AA
1.5 Fail	—	1.4 Fail	1.6 Fail	3.1 AA Large
2.0 Fail	1.4 Fail	—	1.2 Fail	2.3 Fail
2.4 Fail	1.6 Fail	1.2 Fail	—	2.0 Fail
4.6 AA	3.1 AA Large	2.3 Fail	2.0 Fail	—

White BG

1.4Fail

2.1Fail

2.9Fail

3.4AA Large

6.6AA

Black BG

14.7AAA

9.9AAA

7.2AAA

6.2AA

3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDA4

C0C075

99997C

7A7B8F

545478

Deuteranopia

DEDEA8

C2C47A

99997E

78758F

535276

Tritanopia

DFB2B5

CC8387

988385

699090

4F716F

Achromatopsia

D4D4D4

AFAFAF

959595

868686

5C5C5C

Shades & Tints Shades & Tints

#DFDB92

Dark

Light

#CEAE63

Dark

Light

#989A72

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfdb92;
  --color-2: #ceae63;
  --color-3: #989a72;
  --color-4: #67948d;
  --color-5: #4e5c81;
}

SCSS

$color-1: #dfdb92;
$color-2: #ceae63;
$color-3: #989a72;
$color-4: #67948d;
$color-5: #4e5c81;

TAILWIND

colors: {
  'brand-1': '#dfdb92',
  'brand-2': '#ceae63',
  'brand-3': '#989a72',
  'brand-4': '#67948d',
  'brand-5': '#4e5c81',
}

RGB Array

[223, 219, 146], [206, 174, 99], [152, 154, 114], [103, 148, 141], [78, 92, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #DFDB92, #CEAE63, #989A72, #67948D, #4E5C81 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: #dfdb92; --color-2: #ceae63; --color-3: #989a72; --color-4: #67948d; --color-5: #4e5c81. 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