#6F281D + #9C4D22 + #C06F2E + #B4402F + #3C3C34 · 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

#6F281D

Crimson · Maroon · Wine Red

HEX

#6F281D

RGB

rgb(111, 40, 29)

HSL

hsl(8, 59%, 27%)

HSB

hsb(8, 74%, 44%)

CMYK

cmyk(0%, 64%, 74%, 56%)

Oklch

oklch(38.0% 0.103 31.2)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#9C4D22

Tangerine · Sienna · Amber Brown

HEX

#9C4D22

RGB

rgb(156, 77, 34)

HSL

hsl(21, 64%, 37%)

HSB

hsb(21, 78%, 61%)

CMYK

cmyk(0%, 51%, 78%, 39%)

Oklch

oklch(51.1% 0.119 46.5)

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

#C06F2E

Tangerine · Chocolate · Amber Brown

HEX

#C06F2E

RGB

rgb(192, 111, 46)

HSL

hsl(27, 61%, 47%)

HSB

hsb(27, 76%, 75%)

CMYK

cmyk(0%, 42%, 76%, 25%)

Oklch

oklch(62.1% 0.129 55.7)

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

#B4402F

Crimson · Sienna · Passion Red

HEX

#B4402F

RGB

rgb(180, 64, 47)

HSL

hsl(8, 59%, 45%)

HSB

hsb(8, 74%, 71%)

CMYK

cmyk(0%, 64%, 74%, 29%)

Oklch

oklch(53.2% 0.154 31.0)

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

#3C3C34

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#3C3C34

RGB

rgb(60, 60, 52)

HSL

hsl(60, 7%, 22%)

HSB

hsb(60, 13%, 24%)

CMYK

cmyk(0%, 0%, 13%, 76%)

Oklch

oklch(35.3% 0.013 107.1)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6F281D

1C636D

Analogous

6D1C3A

6F281D

6D501C

Triadic

6F281D

1C6D27

271C6D

Split-Comp.

6F281D

1C6D50

1C3A6D

Tetradic

6F281D

3A6D1C

1C636D

501C6D

Contrast Matrix WCAG 2.1 Contrast

6F281D	9C4D22	C06F2E	B4402F	3C3C34
—	1.8 Fail	2.8 Fail	1.9 Fail	1.1 Fail
1.8 Fail	—	1.6 Fail	1.1 Fail	1.9 Fail
2.8 Fail	1.6 Fail	—	1.5 Fail	2.9 Fail
1.9 Fail	1.1 Fail	1.5 Fail	—	2.0 Fail
1.1 Fail	1.9 Fail	2.9 Fail	2.0 Fail	—

White BG

10.5AAA

6.0AA

3.8AA Large

5.7AA

11.1AAA

Black BG

2.0Fail

3.5AA Large

5.6AA

3.7AA Large

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

505020

7A792C

9D9C3E

828133

3C3C36

Deuteranopia

545A20

7E842F

A2A842

899134

3C3C36

Tritanopia

6B2222

983536

BC4A4D

AE3637

3C3738

Achromatopsia

3C3C3C

606060

808080

616161

3B3B3B

Shades & Tints Shades & Tints

#6F281D

Dark

Light

#9C4D22

Dark

Light

#C06F2E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6f281d;
  --color-2: #9c4d22;
  --color-3: #c06f2e;
  --color-4: #b4402f;
  --color-5: #3c3c34;
}

SCSS

$color-1: #6f281d;
$color-2: #9c4d22;
$color-3: #c06f2e;
$color-4: #b4402f;
$color-5: #3c3c34;

TAILWIND

colors: {
  'brand-1': '#6f281d',
  'brand-2': '#9c4d22',
  'brand-3': '#c06f2e',
  'brand-4': '#b4402f',
  'brand-5': '#3c3c34',
}

RGB Array

[111, 40, 29], [156, 77, 34], [192, 111, 46], [180, 64, 47], [60, 60, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #6F281D, #9C4D22, #C06F2E, #B4402F, #3C3C34 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: #6f281d; --color-2: #9c4d22; --color-3: #c06f2e; --color-4: #b4402f; --color-5: #3c3c34. 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