← Back to Editor

#B22023 · #C8BEA3 · #6AA7A0 · #52A093 · #3C2C2D

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

#B22023

Vermilion · FireBrick · Passion Red

HEX
#B22023
RGB
rgb(178, 32, 35)
HSL
hsl(359, 70%, 41%)
HSB
hsb(359, 82%, 70%)
CMYK
cmyk(0%, 82%, 80%, 30%)
Oklch
oklch(49.5% 0.181 26.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#C8BEA3

Goose Yellow · Tan · Sunflower

HEX
#C8BEA3
RGB
rgb(200, 190, 163)
HSL
hsl(44, 25%, 71%)
HSB
hsb(44, 19%, 78%)
CMYK
cmyk(0%, 5%, 19%, 22%)
Oklch
oklch(80.3% 0.038 90.1)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#6AA7A0

Mineral Blue · CadetBlue · Lake Green

HEX
#6AA7A0
RGB
rgb(106, 167, 160)
HSL
hsl(173, 26%, 54%)
HSB
hsb(173, 37%, 65%)
CMYK
cmyk(37%, 0%, 4%, 35%)
Oklch
oklch(68.5% 0.064 186.6)

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

#52A093

Mineral Blue · CadetBlue · Mint Ice

HEX
#52A093
RGB
rgb(82, 160, 147)
HSL
hsl(170, 32%, 47%)
HSB
hsb(170, 49%, 63%)
CMYK
cmyk(49%, 0%, 8%, 37%)
Oklch
oklch(65.2% 0.080 181.5)

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

#3C2C2D

Crimson · DarkSlateGray · Deep Berry

HEX
#3C2C2D
RGB
rgb(60, 44, 45)
HSL
hsl(356, 15%, 20%)
HSB
hsb(356, 27%, 24%)
CMYK
cmyk(0%, 27%, 25%, 76%)
Oklch
oklch(31.2% 0.024 14.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B22023
1FB2AF

Analogous

B21F6B
B22023
B2661F

Triadic

B22023
22B21F
1F22B2

Split-Comp.

B22023
1FB266
1F6BB2

Tetradic

B22023
6BB21F
1FB2AF
661FB2

Contrast Matrix WCAG 2.1 Contrast

B22023
C8BEA3
6AA7A0
52A093
3C2C2D
—
3.6
AA Large
2.4
Fail
2.2
Fail
2.0
Fail
3.6
AA Large
—
1.5
Fail
1.7
Fail
7.1
AAA
2.4
Fail
1.5
Fail
—
1.1
Fail
4.8
AA
2.2
Fail
1.7
Fail
1.1
Fail
—
4.3
AA Large
2.0
Fail
7.1
AAA
4.8
AA
4.3
AA Large
—
White BG
6.7AA
1.9Fail
2.7Fail
3.1AA Large
13.2AAA
Black BG
3.1AA Large
11.4AAA
7.6AAA
6.8AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

737122
C4C4AA
8485A2
747496
35352D

Deuteranopia

7B8622
C4C5AB
817CA2
6F6997
36372D

Tritanopia

AB2222
C8AFB0
6DA3A3
569999
3B2D2D

Achromatopsia

4C4C4C
BEBEBE
949494
878787
313131

Shades & Tints Shades & Tints

#B22023

Dark
Light

#C8BEA3

Dark
Light

#6AA7A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b22023;
  --color-2: #c8bea3;
  --color-3: #6aa7a0;
  --color-4: #52a093;
  --color-5: #3c2c2d;
}

SCSS

$color-1: #b22023;
$color-2: #c8bea3;
$color-3: #6aa7a0;
$color-4: #52a093;
$color-5: #3c2c2d;

TAILWIND

colors: {
  'brand-1': '#b22023',
  'brand-2': '#c8bea3',
  'brand-3': '#6aa7a0',
  'brand-4': '#52a093',
  'brand-5': '#3c2c2d',
}

RGB Array

[178, 32, 35], [200, 190, 163], [106, 167, 160], [82, 160, 147], [60, 44, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #B22023, #C8BEA3, #6AA7A0, #52A093, #3C2C2D is ideal for: 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: #b22023; --color-2: #c8bea3; --color-3: #6aa7a0; --color-4: #52a093; --color-5: #3c2c2d. 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. 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