← Back to Editor

#4C3E30 · #785A3D · #AD6E32 · #CD680C · #F1E2A4

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#4C3E30

Ochre · DarkSlateGray · Cinnamon

HEX
#4C3E30
RGB
rgb(76, 62, 48)
HSL
hsl(30, 23%, 24%)
HSB
hsb(30, 37%, 30%)
CMYK
cmyk(0%, 18%, 37%, 70%)
Oklch
oklch(37.5% 0.030 66.7)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#785A3D

Tangerine · DarkOliveGreen · Amber Brown

HEX
#785A3D
RGB
rgb(120, 90, 61)
HSL
hsl(29, 33%, 35%)
HSB
hsb(29, 49%, 47%)
CMYK
cmyk(0%, 25%, 49%, 53%)
Oklch
oklch(49.1% 0.058 64.8)

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

#AD6E32

Tangerine · Sienna · Amber Brown

HEX
#AD6E32
RGB
rgb(173, 110, 50)
HSL
hsl(29, 55%, 44%)
HSB
hsb(29, 71%, 68%)
CMYK
cmyk(0%, 36%, 71%, 32%)
Oklch
oklch(59.5% 0.110 61.4)

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

#CD680C

Tangerine · Chocolate · Amber Brown

HEX
#CD680C
RGB
rgb(205, 104, 12)
HSL
hsl(29, 89%, 43%)
HSB
hsb(29, 94%, 80%)
CMYK
cmyk(0%, 49%, 94%, 20%)
Oklch
oklch(62.5% 0.155 53.3)

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

#F1E2A4

Goose Yellow · Wheat · Lemon Cream

HEX
#F1E2A4
RGB
rgb(241, 226, 164)
HSL
hsl(48, 73%, 79%)
HSB
hsb(48, 32%, 95%)
CMYK
cmyk(0%, 6%, 32%, 5%)
Oklch
oklch(91.0% 0.081 96.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4C3E30
2F3D4B

Analogous

4B2F2F
4C3E30
4B4B2F

Triadic

4C3E30
2F4B3D
3D2F4B

Split-Comp.

4C3E30
2F4B4B
2F2F4B

Tetradic

4C3E30
2F4B2F
2F3D4B
4B2F4B

Contrast Matrix WCAG 2.1 Contrast

4C3E30
785A3D
AD6E32
CD680C
F1E2A4
—
1.6
Fail
2.5
Fail
2.7
Fail
7.9
AAA
1.6
Fail
—
1.5
Fail
1.7
Fail
4.9
AA
2.5
Fail
1.5
Fail
—
1.1
Fail
3.2
AA Large
2.7
Fail
1.7
Fail
1.1
Fail
—
2.9
Fail
7.9
AAA
4.9
AA
3.2
AA Large
2.9
Fail
—
White BG
10.3AAA
6.3AA
4.2AA Large
3.8AA Large
1.3Fail
Black BG
2.0Fail
3.3AA Large
5.1AA
5.6AA
16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

464633
6B6B44
929141
A1A022
EBEAB3

Deuteranopia

474834
6D6F46
959A44
A7AF28
EBEDB7

Tritanopia

4B3637
774A4B
AA4C4F
C83438
F0BFC1

Achromatopsia

414141
606060
7A7A7A
7C7C7C
DFDFDF

Shades & Tints Shades & Tints

#4C3E30

Dark
Light

#785A3D

Dark
Light

#AD6E32

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4c3e30;
  --color-2: #785a3d;
  --color-3: #ad6e32;
  --color-4: #cd680c;
  --color-5: #f1e2a4;
}

SCSS

$color-1: #4c3e30;
$color-2: #785a3d;
$color-3: #ad6e32;
$color-4: #cd680c;
$color-5: #f1e2a4;

TAILWIND

colors: {
  'brand-1': '#4c3e30',
  'brand-2': '#785a3d',
  'brand-3': '#ad6e32',
  'brand-4': '#cd680c',
  'brand-5': '#f1e2a4',
}

RGB Array

[76, 62, 48], [120, 90, 61], [173, 110, 50], [205, 104, 12], [241, 226, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #4C3E30, #785A3D, #AD6E32, #CD680C, #F1E2A4 is ideal for: 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: #4c3e30; --color-2: #785a3d; --color-3: #ad6e32; --color-4: #cd680c; --color-5: #f1e2a4. 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. 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