#524F24 + #8A8548 + #704421 + #523B24 + #856532 · 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

#524F24

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#524F24

RGB

rgb(82, 79, 36)

HSL

hsl(56, 39%, 23%)

HSB

hsb(56, 56%, 32%)

CMYK

cmyk(0%, 4%, 56%, 68%)

Oklch

oklch(42.0% 0.062 105.2)

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

#8A8548

Autumn Sage · DimGray · Honey Gold

HEX

#8A8548

RGB

rgb(138, 133, 72)

HSL

hsl(55, 31%, 41%)

HSB

hsb(55, 48%, 54%)

CMYK

cmyk(0%, 4%, 48%, 46%)

Oklch

oklch(60.7% 0.082 104.4)

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

#704421

Tangerine · DarkOliveGreen · Amber Brown

HEX

#704421

RGB

rgb(112, 68, 33)

HSL

hsl(27, 54%, 28%)

HSB

hsb(27, 71%, 44%)

CMYK

cmyk(0%, 39%, 71%, 56%)

Oklch

oklch(43.1% 0.078 57.1)

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

#523B24

Ochre · DarkOliveGreen · Cinnamon

HEX

#523B24

RGB

rgb(82, 59, 36)

HSL

hsl(30, 39%, 23%)

HSB

hsb(30, 56%, 32%)

CMYK

cmyk(0%, 28%, 56%, 68%)

Oklch

oklch(37.2% 0.048 65.4)

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

#856532

Ochre · Sienna · Amber Brown

HEX

#856532

RGB

rgb(133, 101, 50)

HSL

hsl(37, 45%, 36%)

HSB

hsb(37, 62%, 52%)

CMYK

cmyk(0%, 24%, 62%, 48%)

Oklch

oklch(52.8% 0.080 77.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

524F24

242752

Analogous

523824

524F24

3E5224

Triadic

524F24

24524E

4E2452

Split-Comp.

524F24

243E52

382452

Tetradic

524F24

245238

242752

52243E

Contrast Matrix WCAG 2.1 Contrast

524F24	8A8548	704421	523B24	856532
—	2.2 Fail	1.0 Fail	1.2 Fail	1.6 Fail
2.2 Fail	—	2.2 Fail	2.8 Fail	1.4 Fail
1.0 Fail	2.2 Fail	—	1.3 Fail	1.5 Fail
1.2 Fail	2.8 Fail	1.3 Fail	—	1.9 Fail
1.6 Fail	1.4 Fail	1.5 Fail	1.9 Fail	—

White BG

8.4AAA

3.8AA Large

8.3AAA

10.4AAA

5.4AA

Black BG

2.5Fail

5.5AA

2.5Fail

2.0Fail

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

51512E

888857

5D5D29

48482A

77773E

Deuteranopia

515131

88895A

60632C

494B2B

797B41

Tritanopia

523738

8A6265

6E3032

512E2F

83484A

Achromatopsia

4B4B4B

808080

4D4D4D

3F3F3F

696969

Shades & Tints Shades & Tints

#524F24

Dark

Light

#8A8548

Dark

Light

#704421

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #524f24;
  --color-2: #8a8548;
  --color-3: #704421;
  --color-4: #523b24;
  --color-5: #856532;
}

SCSS

$color-1: #524f24;
$color-2: #8a8548;
$color-3: #704421;
$color-4: #523b24;
$color-5: #856532;

TAILWIND

colors: {
  'brand-1': '#524f24',
  'brand-2': '#8a8548',
  'brand-3': '#704421',
  'brand-4': '#523b24',
  'brand-5': '#856532',
}

RGB Array

[82, 79, 36], [138, 133, 72], [112, 68, 33], [82, 59, 36], [133, 101, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #524F24, #8A8548, #704421, #523B24, #856532 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: #524f24; --color-2: #8a8548; --color-3: #704421; --color-4: #523b24; --color-5: #856532. 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