← Back to Editor

#1B1B33 · #433447 · #623D2D · #A88366 · #DBB880

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#1B1B33

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#1B1B33
RGB
rgb(27, 27, 51)
HSL
hsl(240, 31%, 15%)
HSB
hsb(240, 47%, 20%)
CMYK
cmyk(47%, 47%, 0%, 80%)
Oklch
oklch(23.5% 0.046 282.3)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#433447

Dark Plum · DarkSlateGray · Eggplant

HEX
#433447
RGB
rgb(67, 52, 71)
HSL
hsl(287, 15%, 24%)
HSB
hsb(287, 27%, 28%)
CMYK
cmyk(6%, 27%, 0%, 72%)
Oklch
oklch(34.9% 0.038 319.1)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#623D2D

Tangerine · DarkOliveGreen · Amber Brown

HEX
#623D2D
RGB
rgb(98, 61, 45)
HSL
hsl(18, 37%, 28%)
HSB
hsb(18, 54%, 38%)
CMYK
cmyk(0%, 38%, 54%, 62%)
Oklch
oklch(40.0% 0.058 44.0)

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

#A88366

Tangerine · Gray · Warm Sun

HEX
#A88366
RGB
rgb(168, 131, 102)
HSL
hsl(26, 27%, 53%)
HSB
hsb(26, 39%, 66%)
CMYK
cmyk(0%, 22%, 39%, 34%)
Oklch
oklch(63.8% 0.061 59.5)

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

#DBB880

Ginger · BurlyWood · Warm Sun

HEX
#DBB880
RGB
rgb(219, 184, 128)
HSL
hsl(37, 56%, 68%)
HSB
hsb(37, 42%, 86%)
CMYK
cmyk(0%, 16%, 42%, 14%)
Oklch
oklch(80.0% 0.083 78.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1B1B33
32321A

Analogous

1A2632
1B1B33
261A32

Triadic

1B1B33
321A1A
1A321A

Split-Comp.

1B1B33
32261A
26321A

Tetradic

1B1B33
321A26
32321A
1A3226

Contrast Matrix WCAG 2.1 Contrast

1B1B33
433447
623D2D
A88366
DBB880
—
1.5
Fail
1.8
Fail
4.9
AA
8.9
AAA
1.5
Fail
—
1.2
Fail
3.4
AA Large
6.1
AA
1.8
Fail
1.2
Fail
—
2.7
Fail
5.0
AA
4.9
AA
3.4
AA Large
2.7
Fail
—
1.8
Fail
8.9
AAA
6.1
AA
5.0
AA
1.8
Fail
—
White BG
16.8AAA
11.5AAA
9.4AAA
3.4AA Large
1.9Fail
Black BG
1.3Fail
1.8Fail
2.2Fail
6.1AA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1B1B2D
3D3C42
525231
98986D
CCCC8E

Deuteranopia

1B1B2C
3D3F41
545732
9A9D6F
CED091

Tritanopia

1B2928
423F3E
603435
A67374
D9989B

Achromatopsia

1E1E1E
3B3B3B
464646
8B8B8B
BCBCBC

Shades & Tints Shades & Tints

#1B1B33

Dark
Light

#433447

Dark
Light

#623D2D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1b1b33;
  --color-2: #433447;
  --color-3: #623d2d;
  --color-4: #a88366;
  --color-5: #dbb880;
}

SCSS

$color-1: #1b1b33;
$color-2: #433447;
$color-3: #623d2d;
$color-4: #a88366;
$color-5: #dbb880;

TAILWIND

colors: {
  'brand-1': '#1b1b33',
  'brand-2': '#433447',
  'brand-3': '#623d2d',
  'brand-4': '#a88366',
  'brand-5': '#dbb880',
}

RGB Array

[27, 27, 51], [67, 52, 71], [98, 61, 45], [168, 131, 102], [219, 184, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #1B1B33, #433447, #623D2D, #A88366, #DBB880 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #1b1b33; --color-2: #433447; --color-3: #623d2d; --color-4: #a88366; --color-5: #dbb880. 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 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