← Back to Editor

#24404F · #263B45 · #353332 · #41312A · #4F2F22

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

#24404F

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#24404F
RGB
rgb(36, 64, 79)
HSL
hsl(201, 37%, 23%)
HSB
hsb(201, 54%, 31%)
CMYK
cmyk(54%, 19%, 0%, 69%)
Oklch
oklch(35.6% 0.043 233.2)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#263B45

Slate Blue · DarkSlateGray · Peacock Green

HEX
#263B45
RGB
rgb(38, 59, 69)
HSL
hsl(199, 29%, 21%)
HSB
hsb(199, 45%, 27%)
CMYK
cmyk(45%, 14%, 0%, 73%)
Oklch
oklch(33.9% 0.032 229.3)

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

#353332

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#353332
RGB
rgb(53, 51, 50)
HSL
hsl(20, 3%, 20%)
HSB
hsb(20, 6%, 21%)
CMYK
cmyk(0%, 4%, 6%, 79%)
Oklch
oklch(32.3% 0.003 48.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#41312A

Tangerine · DarkSlateGray · Cinnamon

HEX
#41312A
RGB
rgb(65, 49, 42)
HSL
hsl(18, 21%, 21%)
HSB
hsb(18, 35%, 25%)
CMYK
cmyk(0%, 25%, 35%, 75%)
Oklch
oklch(32.9% 0.026 44.8)

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

#4F2F22

Tangerine · DarkOliveGreen · Cinnamon

HEX
#4F2F22
RGB
rgb(79, 47, 34)
HSL
hsl(17, 40%, 22%)
HSB
hsb(17, 57%, 31%)
CMYK
cmyk(0%, 41%, 57%, 69%)
Oklch
oklch(34.1% 0.052 42.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

24404F
503425

Analogous

25504A
24404F
252B50

Triadic

24404F
502541
415025

Split-Comp.

24404F
50252B
504A25

Tetradic

24404F
4A2550
503425
2B5025

Contrast Matrix WCAG 2.1 Contrast

24404F
263B45
353332
41312A
4F2F22
—
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
White BG
10.9AAA
11.7AAA
12.6AAA
12.4AAA
11.9AAA
Black BG
1.9Fail
1.8Fail
1.7Fail
1.7Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

30304B
2F2F43
343432
3A3A2C
414125

Deuteranopia

2F2C4B
2E2C42
343432
3B3C2C
434526

Tritanopia

254948
274140
353232
402D2D
4D2828

Achromatopsia

393939
363636
333333
353535
373737

Shades & Tints Shades & Tints

#24404F

Dark
Light

#263B45

Dark
Light

#353332

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #24404f;
  --color-2: #263b45;
  --color-3: #353332;
  --color-4: #41312a;
  --color-5: #4f2f22;
}

SCSS

$color-1: #24404f;
$color-2: #263b45;
$color-3: #353332;
$color-4: #41312a;
$color-5: #4f2f22;

TAILWIND

colors: {
  'brand-1': '#24404f',
  'brand-2': '#263b45',
  'brand-3': '#353332',
  'brand-4': '#41312a',
  'brand-5': '#4f2f22',
}

RGB Array

[36, 64, 79], [38, 59, 69], [53, 51, 50], [65, 49, 42], [79, 47, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #24404F, #263B45, #353332, #41312A, #4F2F22 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: #24404f; --color-2: #263b45; --color-3: #353332; --color-4: #41312a; --color-5: #4f2f22. 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