← Back to Editor

#13946A · #BCCB85 · #43A180 · #565642 · #511705

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

#13946A

Mineral Blue · SeaGreen · Mint Ice

HEX
#13946A
RGB
rgb(19, 148, 106)
HSL
hsl(160, 77%, 33%)
HSB
hsb(160, 87%, 58%)
CMYK
cmyk(87%, 0%, 28%, 42%)
Oklch
oklch(59.2% 0.122 164.0)

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

#BCCB85

Willow Green · Tan · Apple Green

HEX
#BCCB85
RGB
rgb(188, 203, 133)
HSL
hsl(73, 40%, 66%)
HSB
hsb(73, 34%, 80%)
CMYK
cmyk(7%, 0%, 34%, 20%)
Oklch
oklch(81.4% 0.094 118.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#43A180

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#43A180
RGB
rgb(67, 161, 128)
HSL
hsl(159, 41%, 45%)
HSB
hsb(159, 58%, 63%)
CMYK
cmyk(58%, 0%, 20%, 37%)
Oklch
oklch(64.3% 0.103 167.1)

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

#565642

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#565642
RGB
rgb(86, 86, 66)
HSL
hsl(60, 13%, 30%)
HSB
hsb(60, 23%, 34%)
CMYK
cmyk(0%, 0%, 23%, 66%)
Oklch
oklch(44.7% 0.031 107.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#511705

Vermilion · Maroon · Deep Berry

HEX
#511705
RGB
rgb(81, 23, 5)
HSL
hsl(14, 88%, 17%)
HSB
hsb(14, 94%, 32%)
CMYK
cmyk(0%, 72%, 94%, 68%)
Oklch
oklch(29.7% 0.091 37.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

13946A
95133F

Analogous

139529
13946A
137F95

Triadic

13946A
6A1395
956A13

Split-Comp.

13946A
95137F
952913

Tetradic

13946A
291395
95133F
7F9513

Contrast Matrix WCAG 2.1 Contrast

13946A
BCCB85
43A180
565642
511705
—
2.2
Fail
1.2
Fail
2.0
Fail
3.7
AA Large
2.2
Fail
—
1.8
Fail
4.3
AA Large
8.2
AAA
1.2
Fail
1.8
Fail
—
2.4
Fail
4.5
AA
2.0
Fail
4.3
AA Large
2.4
Fail
—
1.9
Fail
3.7
AA Large
8.2
AAA
4.5
AA
1.9
Fail
—
White BG
3.8AA Large
1.7Fail
3.2AA Large
7.5AAA
14.2AAA
Black BG
5.5AA
12.0AAA
6.6AA
2.8Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4C74
C2C396
6C6D88
565647
383709

Deuteranopia

433A77
C2C19A
665F8A
565648
3B400A

Tritanopia

197C7E
BDA3A6
488E90
564B4C
4E0D0E

Achromatopsia

696969
BFBFBF
818181
545454
262626

Shades & Tints Shades & Tints

#13946A

Dark
Light

#BCCB85

Dark
Light

#43A180

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #13946a;
  --color-2: #bccb85;
  --color-3: #43a180;
  --color-4: #565642;
  --color-5: #511705;
}

SCSS

$color-1: #13946a;
$color-2: #bccb85;
$color-3: #43a180;
$color-4: #565642;
$color-5: #511705;

TAILWIND

colors: {
  'brand-1': '#13946a',
  'brand-2': '#bccb85',
  'brand-3': '#43a180',
  'brand-4': '#565642',
  'brand-5': '#511705',
}

RGB Array

[19, 148, 106], [188, 203, 133], [67, 161, 128], [86, 86, 66], [81, 23, 5]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #13946A, #BCCB85, #43A180, #565642, #511705 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: #13946a; --color-2: #bccb85; --color-3: #43a180; --color-4: #565642; --color-5: #511705. 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