← Back to Editor

#B7B05B · #219386 · #766576 · #981B4A · #A88457

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 Library

Color Details Color Details

#B7B05B

Autumn Sage · Tan · Sunflower

HEX
#B7B05B
RGB
rgb(183, 176, 91)
HSL
hsl(55, 39%, 54%)
HSB
hsb(55, 50%, 72%)
CMYK
cmyk(0%, 4%, 50%, 28%)
Oklch
oklch(74.5% 0.108 104.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#219386

Mineral Blue · Teal · Mint Ice

HEX
#219386
RGB
rgb(33, 147, 134)
HSL
hsl(173, 63%, 35%)
HSB
hsb(173, 78%, 58%)
CMYK
cmyk(78%, 0%, 9%, 42%)
Oklch
oklch(60.0% 0.099 183.4)

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

#766576

Rose Purple · DimGray · Warm Gray

HEX
#766576
RGB
rgb(118, 101, 118)
HSL
hsl(300, 8%, 43%)
HSB
hsb(300, 14%, 46%)
CMYK
cmyk(0%, 14%, 0%, 54%)
Oklch
oklch(52.9% 0.033 326.0)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#981B4A

Dark Violet · Brown · Camellia

HEX
#981B4A
RGB
rgb(152, 27, 74)
HSL
hsl(337, 70%, 35%)
HSB
hsb(337, 82%, 60%)
CMYK
cmyk(0%, 82%, 51%, 40%)
Oklch
oklch(45.1% 0.162 4.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#A88457

Ochre · Gray · Amber Brown

HEX
#A88457
RGB
rgb(168, 132, 87)
HSL
hsl(33, 32%, 50%)
HSB
hsb(33, 48%, 66%)
CMYK
cmyk(0%, 21%, 48%, 34%)
Oklch
oklch(63.7% 0.075 72.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7B05B
5C64B7

Analogous

B7825C
B7B05B
91B75C

Triadic

B7B05B
5CB7B0
B05CB7

Split-Comp.

B7B05B
5C91B7
825CB7

Tetradic

B7B05B
5CB782
5C64B7
B75C91

Contrast Matrix WCAG 2.1 Contrast

B7B05B
219386
766576
981B4A
A88457
—
1.7
Fail
2.4
Fail
3.6
AA Large
1.5
Fail
1.7
Fail
—
1.4
Fail
2.2
Fail
1.1
Fail
2.4
Fail
1.4
Fail
—
1.5
Fail
1.6
Fail
3.6
AA Large
2.2
Fail
1.5
Fail
—
2.4
Fail
1.5
Fail
1.1
Fail
1.6
Fail
2.4
Fail
—
White BG
2.2Fail
3.8AA Large
5.4AA
8.1AAA
3.4AA Large
Black BG
9.4AAA
5.6AA
3.9AA Large
2.6Fail
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B470
525389
6F6E72
62613F
989862

Deuteranopia

B4B575
4C438A
707171
69723C
9B9D65

Tritanopia

B78083
278C8C
756F6E
923634
A66A6C

Achromatopsia

A8A8A8
6F6F6F
6C6C6C
464646
8A8A8A

Shades & Tints Shades & Tints

#B7B05B

Dark
Light

#219386

Dark
Light

#766576

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7b05b;
  --color-2: #219386;
  --color-3: #766576;
  --color-4: #981b4a;
  --color-5: #a88457;
}

SCSS

$color-1: #b7b05b;
$color-2: #219386;
$color-3: #766576;
$color-4: #981b4a;
$color-5: #a88457;

TAILWIND

colors: {
  'brand-1': '#b7b05b',
  'brand-2': '#219386',
  'brand-3': '#766576',
  'brand-4': '#981b4a',
  'brand-5': '#a88457',
}

RGB Array

[183, 176, 91], [33, 147, 134], [118, 101, 118], [152, 27, 74], [168, 132, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #B7B05B, #219386, #766576, #981B4A, #A88457 is ideal for: corporate websites, product showcases, portfolios. 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: #b7b05b; --color-2: #219386; --color-3: #766576; --color-4: #981b4a; --color-5: #a88457. 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. 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