← Back to Editor

#111312 · #202D13 · #DDDBCF · #8D7352 · #4F5F30

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#111312

Ink Black · Black · Jet Black

HEX
#111312
RGB
rgb(17, 19, 18)
HSL
hsl(150, 6%, 7%)
HSB
hsb(150, 11%, 7%)
CMYK
cmyk(11%, 0%, 5%, 93%)
Oklch
oklch(18.4% 0.004 164.6)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#202D13

Celadon · Black · Dark Green

HEX
#202D13
RGB
rgb(32, 45, 19)
HSL
hsl(90, 41%, 13%)
HSB
hsb(90, 58%, 18%)
CMYK
cmyk(29%, 0%, 58%, 82%)
Oklch
oklch(27.8% 0.048 130.7)

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

#DDDBCF

Fresh Green · LightGray · Lemon Cream

HEX
#DDDBCF
RGB
rgb(221, 219, 207)
HSL
hsl(51, 17%, 84%)
HSB
hsb(51, 6%, 87%)
CMYK
cmyk(0%, 1%, 6%, 13%)
Oklch
oklch(89.0% 0.016 99.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#8D7352

Ochre · DimGray · Amber Brown

HEX
#8D7352
RGB
rgb(141, 115, 82)
HSL
hsl(34, 26%, 44%)
HSB
hsb(34, 42%, 55%)
CMYK
cmyk(0%, 18%, 42%, 45%)
Oklch
oklch(57.2% 0.057 72.9)

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

#4F5F30

Grass Green · DarkOliveGreen · Forest Green

HEX
#4F5F30
RGB
rgb(79, 95, 48)
HSL
hsl(80, 33%, 28%)
HSB
hsb(80, 49%, 37%)
CMYK
cmyk(17%, 0%, 49%, 63%)
Oklch
oklch(46.0% 0.073 124.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

111312
131112

Analogous

111311
111312
111313

Triadic

111312
121113
131211

Split-Comp.

111312
131113
131111

Tetradic

111312
111113
131112
131311

Contrast Matrix WCAG 2.1 Contrast

111312
202D13
DDDBCF
8D7352
4F5F30
—
1.3
Fail
13.4
AAA
4.2
AA Large
2.7
Fail
1.3
Fail
—
10.4
AAA
3.3
AA Large
2.1
Fail
13.4
AAA
10.4
AAA
—
3.2
AA Large
5.0
AA
4.2
AA Large
3.3
AA Large
3.2
AA Large
—
1.6
Fail
2.7
Fail
2.1
Fail
5.0
AA
1.6
Fail
—
White BG
18.7AAA
14.5AAA
1.4Fail
4.5AA Large
7.0AA
Black BG
1.1Fail
1.4Fail
15.1AAA
4.7AA
3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

121212
262619
DCDCD2
82825A
56563B

Deuteranopia

121212
25241B
DCDCD3
83855C
55543E

Tritanopia

111212
211E1F
DDD4D5
8C6062
504446

Achromatopsia

121212
262626
DADADA
777777
555555

Shades & Tints Shades & Tints

#111312

Dark
Light

#202D13

Dark
Light

#DDDBCF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #111312;
  --color-2: #202d13;
  --color-3: #dddbcf;
  --color-4: #8d7352;
  --color-5: #4f5f30;
}

SCSS

$color-1: #111312;
$color-2: #202d13;
$color-3: #dddbcf;
$color-4: #8d7352;
$color-5: #4f5f30;

TAILWIND

colors: {
  'brand-1': '#111312',
  'brand-2': '#202d13',
  'brand-3': '#dddbcf',
  'brand-4': '#8d7352',
  'brand-5': '#4f5f30',
}

RGB Array

[17, 19, 18], [32, 45, 19], [221, 219, 207], [141, 115, 82], [79, 95, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #111312, #202D13, #DDDBCF, #8D7352, #4F5F30 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #111312; --color-2: #202d13; --color-3: #dddbcf; --color-4: #8d7352; --color-5: #4f5f30. 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. 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 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