← Back to Editor

#CCC0AF · #D9D0B8 · #343433 · #F6F1E8 · #E6E3DA

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#CCC0AF

Goose Yellow · Silver · Warm Sun

HEX
#CCC0AF
RGB
rgb(204, 192, 175)
HSL
hsl(35, 22%, 74%)
HSB
hsb(35, 14%, 80%)
CMYK
cmyk(0%, 6%, 14%, 20%)
Oklch
oklch(81.3% 0.027 76.8)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D9D0B8

Goose Yellow · LightGray · Lemon Cream

HEX
#D9D0B8
RGB
rgb(217, 208, 184)
HSL
hsl(44, 30%, 79%)
HSB
hsb(44, 15%, 85%)
CMYK
cmyk(0%, 4%, 15%, 15%)
Oklch
oklch(85.8% 0.034 89.9)

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

#343433

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#343433
RGB
rgb(52, 52, 51)
HSL
hsl(60, 1%, 20%)
HSB
hsb(60, 2%, 20%)
CMYK
cmyk(0%, 0%, 2%, 80%)
Oklch
oklch(32.5% 0.002 106.5)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#F6F1E8

Goose Yellow · Linen · Peach Orange

HEX
#F6F1E8
RGB
rgb(246, 241, 232)
HSL
hsl(39, 44%, 94%)
HSB
hsb(39, 6%, 96%)
CMYK
cmyk(0%, 2%, 6%, 4%)
Oklch
oklch(96.0% 0.013 82.4)

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

#E6E3DA

Goose Yellow · Beige · Lemon Cream

HEX
#E6E3DA
RGB
rgb(230, 227, 218)
HSL
hsl(45, 19%, 88%)
HSB
hsb(45, 5%, 90%)
CMYK
cmyk(0%, 1%, 5%, 10%)
Oklch
oklch(91.6% 0.013 91.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC0AF
AEBACB

Analogous

CBB1AE
CCC0AF
C9CBAE

Triadic

CCC0AF
AECBBF
BFAECB

Split-Comp.

CCC0AF
AEC9CB
B1AECB

Tetradic

CCC0AF
AECBB1
AEBACB
CBAEC9

Contrast Matrix WCAG 2.1 Contrast

CCC0AF
D9D0B8
343433
F6F1E8
E6E3DA
—
1.2
Fail
7.0
AA
1.6
Fail
1.4
Fail
1.2
Fail
—
8.1
AAA
1.4
Fail
1.2
Fail
7.0
AA
8.1
AAA
—
11.1
AAA
9.7
AAA
1.6
Fail
1.4
Fail
11.1
AAA
—
1.1
Fail
1.4
Fail
1.2
Fail
9.7
AAA
1.1
Fail
—
White BG
1.8Fail
1.5Fail
12.5AAA
1.1Fail
1.3Fail
Black BG
11.7AAA
13.7AAA
1.7Fail
18.7AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C7B3
D5D5BE
343433
F4F4EA
E5E5DC

Deuteranopia

C8C8B4
D6D6BF
343433
F4F5EB
E5E5DD

Tritanopia

CBB6B7
D9C2C3
343333
F6ECEC
E6DEDE

Achromatopsia

C2C2C2
D0D0D0
343434
F1F1F1
E3E3E3

Shades & Tints Shades & Tints

#CCC0AF

Dark
Light

#D9D0B8

Dark
Light

#343433

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc0af;
  --color-2: #d9d0b8;
  --color-3: #343433;
  --color-4: #f6f1e8;
  --color-5: #e6e3da;
}

SCSS

$color-1: #ccc0af;
$color-2: #d9d0b8;
$color-3: #343433;
$color-4: #f6f1e8;
$color-5: #e6e3da;

TAILWIND

colors: {
  'brand-1': '#ccc0af',
  'brand-2': '#d9d0b8',
  'brand-3': '#343433',
  'brand-4': '#f6f1e8',
  'brand-5': '#e6e3da',
}

RGB Array

[204, 192, 175], [217, 208, 184], [52, 52, 51], [246, 241, 232], [230, 227, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #CCC0AF, #D9D0B8, #343433, #F6F1E8, #E6E3DA 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: #ccc0af; --color-2: #d9d0b8; --color-3: #343433; --color-4: #f6f1e8; --color-5: #e6e3da. 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