← Back to Editor

#4D3D3D · #7E6D65 · #D4C8B8 · #F2E8DA · #FAF1E6

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

#4D3D3D

Crimson · DarkSlateGray · Wine Red

HEX
#4D3D3D
RGB
rgb(77, 61, 61)
HSL
hsl(0, 12%, 27%)
HSB
hsb(0, 21%, 30%)
CMYK
cmyk(0%, 21%, 21%, 70%)
Oklch
oklch(37.7% 0.022 18.2)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#7E6D65

Tangerine · DimGray · Amber Brown

HEX
#7E6D65
RGB
rgb(126, 109, 101)
HSL
hsl(19, 11%, 45%)
HSB
hsb(19, 20%, 49%)
CMYK
cmyk(0%, 13%, 20%, 51%)
Oklch
oklch(54.8% 0.025 46.8)

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

#D4C8B8

Goose Yellow · Silver · Peach Orange

HEX
#D4C8B8
RGB
rgb(212, 200, 184)
HSL
hsl(34, 25%, 78%)
HSB
hsb(34, 13%, 83%)
CMYK
cmyk(0%, 6%, 13%, 17%)
Oklch
oklch(83.8% 0.026 75.2)

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

#F2E8DA

Goose Yellow · Beige · Peach Orange

HEX
#F2E8DA
RGB
rgb(242, 232, 218)
HSL
hsl(35, 48%, 90%)
HSB
hsb(35, 10%, 95%)
CMYK
cmyk(0%, 4%, 10%, 5%)
Oklch
oklch(93.5% 0.022 76.5)

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

#FAF1E6

Goose Yellow · Linen · Peach Orange

HEX
#FAF1E6
RGB
rgb(250, 241, 230)
HSL
hsl(33, 67%, 94%)
HSB
hsb(33, 8%, 98%)
CMYK
cmyk(0%, 4%, 8%, 2%)
Oklch
oklch(96.2% 0.018 73.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D3D3D
3D4D4D

Analogous

4D3D45
4D3D3D
4D453D

Triadic

4D3D3D
3D4D3D
3D3D4D

Split-Comp.

4D3D3D
3D4D45
3D454D

Tetradic

4D3D3D
454D3D
3D4D4D
453D4D

Contrast Matrix WCAG 2.1 Contrast

4D3D3D
7E6D65
D4C8B8
F2E8DA
FAF1E6
—
2.1
Fail
6.2
AA
8.5
AAA
9.2
AAA
2.1
Fail
—
3.0
Fail
4.1
AA Large
4.4
AA Large
6.2
AA
3.0
Fail
—
1.4
Fail
1.5
Fail
8.5
AAA
4.1
AA Large
1.4
Fail
—
1.1
Fail
9.2
AAA
4.4
AA Large
1.5
Fail
1.1
Fail
—
White BG
10.2AAA
4.9AA
1.6Fail
1.2Fail
1.1Fail
Black BG
2.1Fail
4.3AA Large
12.8AAA
17.3AAA
18.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

46463D
777667
CFCFBC
EEEEDD
F6F6E9

Deuteranopia

47483D
787967
D0D0BD
EEEFDE
F7F7E9

Tritanopia

4C3D3D
7D6869
D3BFC0
F1E0E1
FAEBEB

Achromatopsia

424242
717171
CACACA
E9E9E9
F2F2F2

Shades & Tints Shades & Tints

#4D3D3D

Dark
Light

#7E6D65

Dark
Light

#D4C8B8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d3d3d;
  --color-2: #7e6d65;
  --color-3: #d4c8b8;
  --color-4: #f2e8da;
  --color-5: #faf1e6;
}

SCSS

$color-1: #4d3d3d;
$color-2: #7e6d65;
$color-3: #d4c8b8;
$color-4: #f2e8da;
$color-5: #faf1e6;

TAILWIND

colors: {
  'brand-1': '#4d3d3d',
  'brand-2': '#7e6d65',
  'brand-3': '#d4c8b8',
  'brand-4': '#f2e8da',
  'brand-5': '#faf1e6',
}

RGB Array

[77, 61, 61], [126, 109, 101], [212, 200, 184], [242, 232, 218], [250, 241, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #4D3D3D, #7E6D65, #D4C8B8, #F2E8DA, #FAF1E6 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #4d3d3d; --color-2: #7e6d65; --color-3: #d4c8b8; --color-4: #f2e8da; --color-5: #faf1e6. 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 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