← Back to Editor

#B4CADF · #8D9EB0 · #63645F · #3D332A · #211612

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

#B4CADF

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#B4CADF
RGB
rgb(180, 202, 223)
HSL
hsl(209, 40%, 79%)
HSB
hsb(209, 19%, 87%)
CMYK
cmyk(19%, 9%, 0%, 13%)
Oklch
oklch(82.9% 0.038 247.0)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#8D9EB0

Azure · DarkGray · Cobalt Blue

HEX
#8D9EB0
RGB
rgb(141, 158, 176)
HSL
hsl(211, 18%, 62%)
HSB
hsb(211, 20%, 69%)
CMYK
cmyk(20%, 10%, 0%, 31%)
Oklch
oklch(69.2% 0.033 249.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#63645F

Ink Gray · DimGray · Charcoal

HEX
#63645F
RGB
rgb(99, 100, 95)
HSL
hsl(72, 3%, 38%)
HSB
hsb(72, 5%, 39%)
CMYK
cmyk(1%, 0%, 5%, 61%)
Oklch
oklch(50.1% 0.008 115.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#3D332A

Tangerine · DarkSlateGray · Cinnamon

HEX
#3D332A
RGB
rgb(61, 51, 42)
HSL
hsl(28, 18%, 20%)
HSB
hsb(28, 31%, 24%)
CMYK
cmyk(0%, 16%, 31%, 76%)
Oklch
oklch(32.9% 0.021 64.0)

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

#211612

Tangerine · Black · Cinnamon

HEX
#211612
RGB
rgb(33, 22, 18)
HSL
hsl(16, 29%, 10%)
HSB
hsb(16, 45%, 13%)
CMYK
cmyk(0%, 33%, 45%, 87%)
Oklch
oklch(21.3% 0.020 40.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4CADF
DFC9B4

Analogous

B4DFDE
B4CADF
B4B5DF

Triadic

B4CADF
DFB4CA
CADFB4

Split-Comp.

B4CADF
DFB4B5
DFDEB4

Tetradic

B4CADF
DEB4DF
DFC9B4
B5DFB4

Contrast Matrix WCAG 2.1 Contrast

B4CADF
8D9EB0
63645F
3D332A
211612
—
1.6
Fail
3.5
AA Large
7.3
AAA
10.5
AAA
1.6
Fail
—
2.2
Fail
4.5
AA Large
6.4
AA
3.5
AA Large
2.2
Fail
—
2.1
Fail
3.0
Fail
7.3
AAA
4.5
AA Large
2.1
Fail
—
1.4
Fail
10.5
AAA
6.4
AA
3.0
Fail
1.4
Fail
—
White BG
1.7Fail
2.7Fail
6.0AA
12.3AAA
17.7AAA
Black BG
12.5AAA
7.7AAA
3.5AA Large
1.7Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBEDA
9495AC
636360
39392C
1C1C13

Deuteranopia

BCBBD9
9392AB
636361
393A2D
1D1E13

Tritanopia

B5D6D5
8EA8A7
636161
3C2E2E
201414

Achromatopsia

C6C6C6
9B9B9B
636363
353535
191919

Shades & Tints Shades & Tints

#B4CADF

Dark
Light

#8D9EB0

Dark
Light

#63645F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4cadf;
  --color-2: #8d9eb0;
  --color-3: #63645f;
  --color-4: #3d332a;
  --color-5: #211612;
}

SCSS

$color-1: #b4cadf;
$color-2: #8d9eb0;
$color-3: #63645f;
$color-4: #3d332a;
$color-5: #211612;

TAILWIND

colors: {
  'brand-1': '#b4cadf',
  'brand-2': '#8d9eb0',
  'brand-3': '#63645f',
  'brand-4': '#3d332a',
  'brand-5': '#211612',
}

RGB Array

[180, 202, 223], [141, 158, 176], [99, 100, 95], [61, 51, 42], [33, 22, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #B4CADF, #8D9EB0, #63645F, #3D332A, #211612 is ideal for: brand design, premium product pages, magazine layouts, 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: #b4cadf; --color-2: #8d9eb0; --color-3: #63645f; --color-4: #3d332a; --color-5: #211612. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. 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