← Back to Editor

#DFD7C2 · #F9F7F8 · #979694 · #89878C · #706D64

earth

A 5-color earth palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#DFD7C2

Goose Yellow · LightGray · Lemon Cream

HEX
#DFD7C2
RGB
rgb(223, 215, 194)
HSL
hsl(43, 31%, 82%)
HSB
hsb(43, 13%, 87%)
CMYK
cmyk(0%, 4%, 13%, 13%)
Oklch
oklch(88.0% 0.030 89.6)

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

#F9F7F8

Rouge · Snow · Cherry Blossom

HEX
#F9F7F8
RGB
rgb(249, 247, 248)
HSL
hsl(330, 14%, 97%)
HSB
hsb(330, 1%, 98%)
CMYK
cmyk(0%, 1%, 0%, 2%)
Oklch
oklch(97.8% 0.002 345.2)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#979694

Ash · DarkGray · Silver Sand

HEX
#979694
RGB
rgb(151, 150, 148)
HSL
hsl(40, 1%, 59%)
HSB
hsb(40, 2%, 59%)
CMYK
cmyk(0%, 1%, 2%, 41%)
Oklch
oklch(67.3% 0.003 84.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#89878C

Ash · Gray · Warm Gray

HEX
#89878C
RGB
rgb(137, 135, 140)
HSL
hsl(264, 2%, 54%)
HSB
hsb(264, 4%, 55%)
CMYK
cmyk(2%, 4%, 0%, 45%)
Oklch
oklch(62.7% 0.008 304.2)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#706D64

Ink Gray · DimGray · Warm Gray

HEX
#706D64
RGB
rgb(112, 109, 100)
HSL
hsl(45, 6%, 42%)
HSB
hsb(45, 11%, 44%)
CMYK
cmyk(0%, 3%, 11%, 56%)
Oklch
oklch(53.5% 0.014 91.6)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFD7C2
C3CBDF

Analogous

DFC9C3
DFD7C2
D9DFC3

Triadic

DFD7C2
C3DFD7
D7C3DF

Split-Comp.

DFD7C2
C3D9DF
C9C3DF

Tetradic

DFD7C2
C3DFC9
C3CBDF
DFC3D9

Contrast Matrix WCAG 2.1 Contrast

DFD7C2
F9F7F8
979694
89878C
706D64
—
1.3
Fail
2.1
Fail
2.5
Fail
3.6
AA Large
1.3
Fail
—
2.8
Fail
3.3
AA Large
4.8
AA
2.1
Fail
2.8
Fail
—
1.2
Fail
1.8
Fail
2.5
Fail
3.3
AA Large
1.2
Fail
—
1.5
Fail
3.6
AA Large
4.8
AA
1.8
Fail
1.5
Fail
—
White BG
1.4Fail
1.1Fail
3.0Fail
3.6AA Large
5.2AA
Black BG
14.6AAA
19.7AAA
7.1AAA
5.9AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDBC7
F8F8F8
979794
88888B
6F6F66

Deuteranopia

DCDDC8
F8F8F8
979795
88888B
6F6F67

Tritanopia

DFCBCC
F9F8F8
979595
898A8A
706868

Achromatopsia

D7D7D7
F8F8F8
969696
888888
6D6D6D

Shades & Tints Shades & Tints

#DFD7C2

Dark
Light

#F9F7F8

Dark
Light

#979694

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfd7c2;
  --color-2: #f9f7f8;
  --color-3: #979694;
  --color-4: #89878c;
  --color-5: #706d64;
}

SCSS

$color-1: #dfd7c2;
$color-2: #f9f7f8;
$color-3: #979694;
$color-4: #89878c;
$color-5: #706d64;

TAILWIND

colors: {
  'brand-1': '#dfd7c2',
  'brand-2': '#f9f7f8',
  'brand-3': '#979694',
  'brand-4': '#89878c',
  'brand-5': '#706d64',
}

RGB Array

[223, 215, 194], [249, 247, 248], [151, 150, 148], [137, 135, 140], [112, 109, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #DFD7C2, #F9F7F8, #979694, #89878C, #706D64 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dfd7c2; --color-2: #f9f7f8; --color-3: #979694; --color-4: #89878c; --color-5: #706d64. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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