#2F1C11 + #6E6B2C + #807F48 + #A39247 + #BDA438 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2F1C11

Tangerine · Black · Cinnamon

HEX

#2F1C11

RGB

rgb(47, 28, 17)

HSL

hsl(22, 47%, 13%)

HSB

hsb(22, 64%, 18%)

CMYK

cmyk(0%, 40%, 64%, 82%)

Oklch

oklch(24.8% 0.036 50.5)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#6E6B2C

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#6E6B2C

RGB

rgb(110, 107, 44)

HSL

hsl(57, 43%, 30%)

HSB

hsb(57, 60%, 43%)

CMYK

cmyk(0%, 3%, 60%, 57%)

Oklch

oklch(51.7% 0.084 106.5)

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

#807F48

Autumn Sage · DimGray · Honey Gold

HEX

#807F48

RGB

rgb(128, 127, 72)

HSL

hsl(59, 28%, 39%)

HSB

hsb(59, 44%, 50%)

CMYK

cmyk(0%, 1%, 44%, 50%)

Oklch

oklch(58.4% 0.076 107.6)

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

#A39247

Ochre · DarkGoldenRod · Honey Gold

HEX

#A39247

RGB

rgb(163, 146, 71)

HSL

hsl(49, 39%, 46%)

HSB

hsb(49, 56%, 64%)

CMYK

cmyk(0%, 10%, 56%, 36%)

Oklch

oklch(65.9% 0.098 96.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#BDA438

Ochre · GoldenRod · Honey Gold

HEX

#BDA438

RGB

rgb(189, 164, 56)

HSL

hsl(49, 54%, 48%)

HSB

hsb(49, 70%, 74%)

CMYK

cmyk(0%, 13%, 70%, 26%)

Oklch

oklch(72.1% 0.127 95.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F1C11

122531

Analogous

311216

2F1C11

312D12

Triadic

2F1C11

12311D

1D1231

Split-Comp.

2F1C11

12312D

121631

Tetradic

2F1C11

163112

122531

2D1231

Contrast Matrix WCAG 2.1 Contrast

2F1C11	6E6B2C	807F48	A39247	BDA438
—	2.9 Fail	3.9 AA Large	5.2 AA	6.6 AA
2.9 Fail	—	1.3 Fail	1.8 Fail	2.2 Fail
3.9 AA Large	1.3 Fail	—	1.3 Fail	1.7 Fail
5.2 AA	1.8 Fail	1.3 Fail	—	1.3 Fail
6.6 AA	2.2 Fail	1.7 Fail	1.3 Fail	—

White BG

16.2AAA

5.5AA

4.2AA Large

3.1AA Large

2.5Fail

Black BG

1.3Fail

3.8AA Large

5.0AA

6.8AA

8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

272714

6D6D3B

808055

9C9B59

B2B252

Deuteranopia

282914

6D6D3F

808059

9D9E5E

B4B558

Tritanopia

2E1616

6E474A

806062

A2676B

BC676B

Achromatopsia

202020

656565

797979

8F8F8F

9F9F9F

Shades & Tints Shades & Tints

#2F1C11

Dark

Light

#6E6B2C

Dark

Light

#807F48

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f1c11;
  --color-2: #6e6b2c;
  --color-3: #807f48;
  --color-4: #a39247;
  --color-5: #bda438;
}

SCSS

$color-1: #2f1c11;
$color-2: #6e6b2c;
$color-3: #807f48;
$color-4: #a39247;
$color-5: #bda438;

TAILWIND

colors: {
  'brand-1': '#2f1c11',
  'brand-2': '#6e6b2c',
  'brand-3': '#807f48',
  'brand-4': '#a39247',
  'brand-5': '#bda438',
}

RGB Array

[47, 28, 17], [110, 107, 44], [128, 127, 72], [163, 146, 71], [189, 164, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F1C11, #6E6B2C, #807F48, #A39247, #BDA438 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: #2f1c11; --color-2: #6e6b2c; --color-3: #807f48; --color-4: #a39247; --color-5: #bda438. 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 general-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