← Back to Editor

#317671 · #523F1F · #334644 · #1F201A · #948067

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#317671

Mineral Blue · SeaGreen · Mint Ice

HEX
#317671
RGB
rgb(49, 118, 113)
HSL
hsl(176, 41%, 33%)
HSB
hsb(176, 58%, 46%)
CMYK
cmyk(58%, 0%, 4%, 54%)
Oklch
oklch(52.0% 0.070 188.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#523F1F

Ochre · DarkOliveGreen · Cinnamon

HEX
#523F1F
RGB
rgb(82, 63, 31)
HSL
hsl(38, 45%, 22%)
HSB
hsb(38, 62%, 32%)
CMYK
cmyk(0%, 23%, 62%, 68%)
Oklch
oklch(38.1% 0.054 79.0)

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

#334644

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#334644
RGB
rgb(51, 70, 68)
HSL
hsl(174, 16%, 24%)
HSB
hsb(174, 27%, 27%)
CMYK
cmyk(27%, 0%, 3%, 73%)
Oklch
oklch(37.7% 0.024 188.2)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#1F201A

Grass Green · Black · Dark Green

HEX
#1F201A
RGB
rgb(31, 32, 26)
HSL
hsl(70, 10%, 11%)
HSB
hsb(70, 19%, 13%)
CMYK
cmyk(3%, 0%, 19%, 87%)
Oklch
oklch(24.0% 0.011 114.9)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

#948067

Ochre · Gray · Amber Brown

HEX
#948067
RGB
rgb(148, 128, 103)
HSL
hsl(33, 18%, 49%)
HSB
hsb(33, 30%, 58%)
CMYK
cmyk(0%, 14%, 30%, 42%)
Oklch
oklch(61.2% 0.044 73.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

317671
773236

Analogous

327750
317671
325977

Triadic

317671
723277
777232

Split-Comp.

317671
773259
775032

Tetradic

317671
503277
773236
597732

Contrast Matrix WCAG 2.1 Contrast

317671
523F1F
334644
1F201A
948067
—
1.9
Fail
1.9
Fail
3.1
AA Large
1.4
Fail
1.9
Fail
—
1.0
Fail
1.6
Fail
2.7
Fail
1.9
Fail
1.0
Fail
—
1.6
Fail
2.6
Fail
3.1
AA Large
1.6
Fail
1.6
Fail
—
4.3
AA Large
1.4
Fail
2.7
Fail
2.6
Fail
4.3
AA Large
—
White BG
5.3AA
10.0AAA
10.0AAA
16.4AAA
3.8AA Large
Black BG
4.0AA Large
2.1Fail
2.1Fail
1.3Fail
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F72
4A4A27
3B3B44
1F1F1B
8B8B6D

Deuteranopia

4B4673
4B4C29
3A3945
1F1F1C
8D8E6F

Tritanopia

347373
512D2E
344545
1F1D1D
937273

Achromatopsia

616161
414141
404040
1F1F1F
838383

Shades & Tints Shades & Tints

#317671

Dark
Light

#523F1F

Dark
Light

#334644

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #317671;
  --color-2: #523f1f;
  --color-3: #334644;
  --color-4: #1f201a;
  --color-5: #948067;
}

SCSS

$color-1: #317671;
$color-2: #523f1f;
$color-3: #334644;
$color-4: #1f201a;
$color-5: #948067;

TAILWIND

colors: {
  'brand-1': '#317671',
  'brand-2': '#523f1f',
  'brand-3': '#334644',
  'brand-4': '#1f201a',
  'brand-5': '#948067',
}

RGB Array

[49, 118, 113], [82, 63, 31], [51, 70, 68], [31, 32, 26], [148, 128, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #317671, #523F1F, #334644, #1F201A, #948067 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #317671; --color-2: #523f1f; --color-3: #334644; --color-4: #1f201a; --color-5: #948067. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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