#907860 + #F0A830 + #815464 + #483030 + #604830 · 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

#907860

Ochre · Gray · Amber Brown

HEX

#907860

RGB

rgb(144, 120, 96)

HSL

hsl(30, 20%, 47%)

HSB

hsb(30, 33%, 56%)

CMYK

cmyk(0%, 17%, 33%, 44%)

Oklch

oklch(58.9% 0.046 66.7)

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

#F0A830

Ginger · GoldenRod · Warm Sun

HEX

#F0A830

RGB

rgb(240, 168, 48)

HSL

hsl(38, 86%, 56%)

HSB

hsb(38, 80%, 94%)

CMYK

cmyk(0%, 30%, 80%, 6%)

Oklch

oklch(78.2% 0.151 74.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#815464

Dark Violet · DimGray · Camellia

HEX

#815464

RGB

rgb(129, 84, 100)

HSL

hsl(339, 21%, 42%)

HSB

hsb(339, 35%, 51%)

CMYK

cmyk(0%, 35%, 22%, 49%)

Oklch

oklch(50.0% 0.064 356.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#483030

Crimson · DarkSlateGray · Wine Red

HEX

#483030

RGB

rgb(72, 48, 48)

HSL

hsl(0, 20%, 24%)

HSB

hsb(0, 33%, 28%)

CMYK

cmyk(0%, 33%, 33%, 72%)

Oklch

oklch(33.8% 0.035 19.1)

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

#604830

Ochre · DarkOliveGreen · Amber Brown

HEX

#604830

RGB

rgb(96, 72, 48)

HSL

hsl(30, 33%, 28%)

HSB

hsb(30, 50%, 38%)

CMYK

cmyk(0%, 25%, 50%, 62%)

Oklch

oklch(42.1% 0.049 65.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

907860

607890

Analogous

906060

907860

909060

Triadic

907860

609078

786090

Split-Comp.

907860

609090

606090

Tetradic

907860

609060

607890

906090

Contrast Matrix WCAG 2.1 Contrast

907860	F0A830	815464	483030	604830
—	2.1 Fail	1.5 Fail	2.9 Fail	2.0 Fail
2.1 Fail	—	3.1 AA Large	5.9 AA	4.2 AA Large
1.5 Fail	3.1 AA Large	—	1.9 Fail	1.4 Fail
2.9 Fail	5.9 AA	1.9 Fail	—	1.4 Fail
2.0 Fail	4.2 AA Large	1.4 Fail	1.4 Fail	—

White BG

4.2AA Large

2.0Fail

6.2AA

12.1AAA

8.5AAA

Black BG

5.0AA

10.3AAA

3.4AA Large

1.7Fail

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

868566

D1D04D

6E6D60

3E3D30

565536

Deuteranopia

878967

D5DA54

70745F

3F4130

575937

Tritanopia

8F6A6B

EC6469

7F5D5C

473030

5F3A3B

Achromatopsia

7C7C7C

B0B0B0

636363

373737

4C4C4C

Shades & Tints Shades & Tints

#907860

Dark

Light

#F0A830

Dark

Light

#815464

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #907860;
  --color-2: #f0a830;
  --color-3: #815464;
  --color-4: #483030;
  --color-5: #604830;
}

SCSS

$color-1: #907860;
$color-2: #f0a830;
$color-3: #815464;
$color-4: #483030;
$color-5: #604830;

TAILWIND

colors: {
  'brand-1': '#907860',
  'brand-2': '#f0a830',
  'brand-3': '#815464',
  'brand-4': '#483030',
  'brand-5': '#604830',
}

RGB Array

[144, 120, 96], [240, 168, 48], [129, 84, 100], [72, 48, 48], [96, 72, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #907860, #F0A830, #815464, #483030, #604830 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: #907860; --color-2: #f0a830; --color-3: #815464; --color-4: #483030; --color-5: #604830. 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