#B6B270 + #697B39 + #AD7812 + #8A0514 + #3C332B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B6B270

Autumn Sage · Tan · Sunflower

HEX

#B6B270

RGB

rgb(182, 178, 112)

HSL

hsl(57, 32%, 58%)

HSB

hsb(57, 38%, 71%)

CMYK

cmyk(0%, 2%, 38%, 29%)

Oklch

oklch(75.2% 0.087 105.3)

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

#697B39

Grass Green · DarkOliveGreen · Forest Green

HEX

#697B39

RGB

rgb(105, 123, 57)

HSL

hsl(76, 37%, 35%)

HSB

hsb(76, 54%, 48%)

CMYK

cmyk(15%, 0%, 54%, 52%)

Oklch

oklch(55.3% 0.094 122.1)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#AD7812

Ochre · DarkGoldenRod · Amber Brown

HEX

#AD7812

RGB

rgb(173, 120, 18)

HSL

hsl(39, 81%, 37%)

HSB

hsb(39, 90%, 68%)

CMYK

cmyk(0%, 31%, 90%, 32%)

Oklch

oklch(61.2% 0.123 76.5)

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

#8A0514

Vermilion · DarkRed · Wine Red

HEX

#8A0514

RGB

rgb(138, 5, 20)

HSL

hsl(353, 93%, 28%)

HSB

hsb(353, 96%, 54%)

CMYK

cmyk(0%, 96%, 86%, 46%)

Oklch

oklch(40.1% 0.159 25.1)

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

#3C332B

Tangerine · DarkSlateGray · Cinnamon

HEX

#3C332B

RGB

rgb(60, 51, 43)

HSL

hsl(28, 17%, 20%)

HSB

hsb(28, 28%, 24%)

CMYK

cmyk(0%, 15%, 28%, 76%)

Oklch

oklch(32.8% 0.019 63.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B6B270

7275B6

Analogous

B69072

B6B270

97B672

Triadic

B6B270

72B6B3

B372B6

Split-Comp.

B6B270

7297B6

9072B6

Tetradic

B6B270

72B690

7275B6

B67297

Contrast Matrix WCAG 2.1 Contrast

B6B270	697B39	AD7812	8A0514	3C332B
—	2.1 Fail	1.8 Fail	4.5 AA	5.6 AA
2.1 Fail	—	1.2 Fail	2.1 Fail	2.6 Fail
1.8 Fail	1.2 Fail	—	2.6 Fail	3.2 AA Large
4.5 AA	2.1 Fail	2.6 Fail	—	1.2 Fail
5.6 AA	2.6 Fail	3.2 AA Large	1.2 Fail	—

White BG

2.2Fail

4.7AA

3.8AA Large

9.9AAA

12.3AAA

Black BG

9.6AAA

4.5AA Large

5.5AA

2.1Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B480

717149

96962B

504F10

38382D

Deuteranopia

B5B584

706E4D

999D31

586210

39392D

Tritanopia

B68D8F

6A5658

AA3E42

830E0D

3C2E2F

Achromatopsia

ACACAC

6E6E6E

7C7C7C

2E2E2E

353535

Shades & Tints Shades & Tints

#B6B270

Dark

Light

#697B39

Dark

Light

#AD7812

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b6b270;
  --color-2: #697b39;
  --color-3: #ad7812;
  --color-4: #8a0514;
  --color-5: #3c332b;
}

SCSS

$color-1: #b6b270;
$color-2: #697b39;
$color-3: #ad7812;
$color-4: #8a0514;
$color-5: #3c332b;

TAILWIND

colors: {
  'brand-1': '#b6b270',
  'brand-2': '#697b39',
  'brand-3': '#ad7812',
  'brand-4': '#8a0514',
  'brand-5': '#3c332b',
}

RGB Array

[182, 178, 112], [105, 123, 57], [173, 120, 18], [138, 5, 20], [60, 51, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B6B270, #697B39, #AD7812, #8A0514, #3C332B 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: #b6b270; --color-2: #697b39; --color-3: #ad7812; --color-4: #8a0514; --color-5: #3c332b. 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