#2C1B1C + #817B4D + #9B9B6E + #B06F22 + #B7B111 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2C1B1C

Crimson · Black · Deep Berry

HEX

#2C1B1C

RGB

rgb(44, 27, 28)

HSL

hsl(356, 24%, 14%)

HSB

hsb(356, 39%, 17%)

CMYK

cmyk(0%, 39%, 36%, 83%)

Oklch

oklch(24.4% 0.027 15.4)

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

#817B4D

Autumn Sage · DimGray · Honey Gold

HEX

#817B4D

RGB

rgb(129, 123, 77)

HSL

hsl(53, 25%, 40%)

HSB

hsb(53, 40%, 51%)

CMYK

cmyk(0%, 5%, 40%, 49%)

Oklch

oklch(57.7% 0.065 101.8)

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

#9B9B6E

Autumn Sage · Gray · Sunflower

HEX

#9B9B6E

RGB

rgb(155, 155, 110)

HSL

hsl(60, 18%, 52%)

HSB

hsb(60, 29%, 61%)

CMYK

cmyk(0%, 0%, 29%, 39%)

Oklch

oklch(67.8% 0.062 108.0)

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

#B06F22

Ochre · DarkGoldenRod · Amber Brown

HEX

#B06F22

RGB

rgb(176, 111, 34)

HSL

hsl(33, 68%, 41%)

HSB

hsb(33, 81%, 69%)

CMYK

cmyk(0%, 37%, 81%, 31%)

Oklch

oklch(59.9% 0.120 65.4)

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

#B7B111

Autumn Sage · GoldenRod · Honey Gold

HEX

#B7B111

RGB

rgb(183, 177, 17)

HSL

hsl(58, 83%, 39%)

HSB

hsb(58, 91%, 72%)

CMYK

cmyk(0%, 3%, 91%, 28%)

Oklch

oklch(74.2% 0.156 107.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C1B1C

1B2C2B

Analogous

2C1B25

2C1B1C

2C231B

Triadic

2C1B1C

1C2C1B

1B1C2C

Split-Comp.

2C1B1C

1B2C23

1B252C

Tetradic

2C1B1C

252C1B

1B2C2B

231B2C

Contrast Matrix WCAG 2.1 Contrast

2C1B1C	817B4D	9B9B6E	B06F22	B7B111
—	3.8 AA Large	5.7 AA	4.0 AA Large	7.3 AAA
3.8 AA Large	—	1.5 Fail	1.1 Fail	1.9 Fail
5.7 AA	1.5 Fail	—	1.4 Fail	1.3 Fail
4.0 AA Large	1.1 Fail	1.4 Fail	—	1.8 Fail
7.3 AAA	1.9 Fail	1.3 Fail	1.8 Fail	—

White BG

16.4AAA

4.3AA Large

2.9Fail

4.1AA Large

2.3Fail

Black BG

1.3Fail

4.9AA

7.3AAA

5.1AA

9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

25241C

7E7E58

9B9B79

949335

B4B438

Deuteranopia

26271C

7F7F5B

9B9B7C

989D39

B5B541

Tritanopia

2B1C1C

816163

9B8183

AD4347

B7565D

Achromatopsia

202020

787878

969696

7A7A7A

A1A1A1

Shades & Tints Shades & Tints

#2C1B1C

Dark

Light

#817B4D

Dark

Light

#9B9B6E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c1b1c;
  --color-2: #817b4d;
  --color-3: #9b9b6e;
  --color-4: #b06f22;
  --color-5: #b7b111;
}

SCSS

$color-1: #2c1b1c;
$color-2: #817b4d;
$color-3: #9b9b6e;
$color-4: #b06f22;
$color-5: #b7b111;

TAILWIND

colors: {
  'brand-1': '#2c1b1c',
  'brand-2': '#817b4d',
  'brand-3': '#9b9b6e',
  'brand-4': '#b06f22',
  'brand-5': '#b7b111',
}

RGB Array

[44, 27, 28], [129, 123, 77], [155, 155, 110], [176, 111, 34], [183, 177, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #2C1B1C, #817B4D, #9B9B6E, #B06F22, #B7B111 is ideal for: tech websites, dark mode UIs, game UIs. 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: #2c1b1c; --color-2: #817b4d; --color-3: #9b9b6e; --color-4: #b06f22; --color-5: #b7b111. 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. 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