#8C3D16 + #8E4C3E + #CEAB69 + #787147 + #524D2D · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8C3D16

Tangerine · Sienna · Amber Brown

HEX

#8C3D16

RGB

rgb(140, 61, 22)

HSL

hsl(20, 73%, 32%)

HSB

hsb(20, 84%, 55%)

CMYK

cmyk(0%, 56%, 84%, 45%)

Oklch

oklch(45.9% 0.119 43.7)

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

#8E4C3E

Crimson · Sienna · Wine Red

HEX

#8E4C3E

RGB

rgb(142, 76, 62)

HSL

hsl(10, 39%, 40%)

HSB

hsb(10, 56%, 56%)

CMYK

cmyk(0%, 46%, 56%, 44%)

Oklch

oklch(49.3% 0.092 33.1)

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

#CEAB69

Ginger · Tan · Warm Sun

HEX

#CEAB69

RGB

rgb(206, 171, 105)

HSL

hsl(39, 51%, 61%)

HSB

hsb(39, 49%, 81%)

CMYK

cmyk(0%, 17%, 49%, 19%)

Oklch

oklch(75.8% 0.094 82.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#787147

Autumn Sage · DimGray · Honey Gold

HEX

#787147

RGB

rgb(120, 113, 71)

HSL

hsl(51, 26%, 37%)

HSB

hsb(51, 41%, 47%)

CMYK

cmyk(0%, 6%, 41%, 53%)

Oklch

oklch(54.4% 0.060 99.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#524D2D

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#524D2D

RGB

rgb(82, 77, 45)

HSL

hsl(52, 29%, 25%)

HSB

hsb(52, 45%, 32%)

CMYK

cmyk(0%, 6%, 45%, 68%)

Oklch

oklch(41.7% 0.049 100.5)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C3D16

16658D

Analogous

8D162A

8C3D16

8D7916

Triadic

8C3D16

168D3E

3E168D

Split-Comp.

8C3D16

168D79

162A8D

Tetradic

8C3D16

2A8D16

16658D

79168D

Contrast Matrix WCAG 2.1 Contrast

8C3D16	8E4C3E	CEAB69	787147	524D2D
—	1.2 Fail	3.5 AA Large	1.5 Fail	1.1 Fail
1.2 Fail	—	3.0 Fail	1.3 Fail	1.3 Fail
3.5 AA Large	3.0 Fail	—	2.3 Fail	3.9 AA Large
1.5 Fail	1.3 Fail	2.3 Fail	—	1.7 Fail
1.1 Fail	1.3 Fail	3.9 AA Large	1.7 Fail	—

White BG

7.5AAA

6.5AA

2.2Fail

4.9AA

8.5AAA

Black BG

2.8Fail

3.3AA Large

9.7AAA

4.3AA Large

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A691F

717141

BFBF79

757551

505035

Deuteranopia

6E7422

757A42

C1C47D

757654

505137

Tritanopia

882729

8B4445

CC8688

78595B

523B3C

Achromatopsia

505050

5E5E5E

AEAEAE

6E6E6E

4B4B4B

Shades & Tints Shades & Tints

#8C3D16

Dark

Light

#8E4C3E

Dark

Light

#CEAB69

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c3d16;
  --color-2: #8e4c3e;
  --color-3: #ceab69;
  --color-4: #787147;
  --color-5: #524d2d;
}

SCSS

$color-1: #8c3d16;
$color-2: #8e4c3e;
$color-3: #ceab69;
$color-4: #787147;
$color-5: #524d2d;

TAILWIND

colors: {
  'brand-1': '#8c3d16',
  'brand-2': '#8e4c3e',
  'brand-3': '#ceab69',
  'brand-4': '#787147',
  'brand-5': '#524d2d',
}

RGB Array

[140, 61, 22], [142, 76, 62], [206, 171, 105], [120, 113, 71], [82, 77, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #8C3D16, #8E4C3E, #CEAB69, #787147, #524D2D is ideal for: tech websites, dark mode UIs, game UIs. 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: #8c3d16; --color-2: #8e4c3e; --color-3: #ceab69; --color-4: #787147; --color-5: #524d2d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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