#685544 + #846934 + #DF8934 + #BF4B1C + #484029 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#685544

Tangerine · DarkOliveGreen · Amber Brown

HEX

#685544

RGB

rgb(104, 85, 68)

HSL

hsl(28, 21%, 34%)

HSB

hsb(28, 35%, 41%)

CMYK

cmyk(0%, 18%, 35%, 59%)

Oklch

oklch(46.4% 0.036 63.6)

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

#846934

Ochre · Sienna · Honey Gold

HEX

#846934

RGB

rgb(132, 105, 52)

HSL

hsl(40, 43%, 36%)

HSB

hsb(40, 61%, 52%)

CMYK

cmyk(0%, 20%, 61%, 48%)

Oklch

oklch(53.6% 0.079 82.5)

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

#DF8934

Ginger · GoldenRod · Warm Sun

HEX

#DF8934

RGB

rgb(223, 137, 52)

HSL

hsl(30, 73%, 54%)

HSB

hsb(30, 77%, 87%)

CMYK

cmyk(0%, 39%, 77%, 13%)

Oklch

oklch(70.6% 0.142 61.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#BF4B1C

Tangerine · Chocolate · Amber Brown

HEX

#BF4B1C

RGB

rgb(191, 75, 28)

HSL

hsl(17, 74%, 43%)

HSB

hsb(17, 85%, 75%)

CMYK

cmyk(0%, 61%, 85%, 25%)

Oklch

oklch(56.2% 0.160 40.0)

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

#484029

Ochre · DarkOliveGreen · Amber Gold

HEX

#484029

RGB

rgb(72, 64, 41)

HSL

hsl(45, 27%, 22%)

HSB

hsb(45, 43%, 28%)

CMYK

cmyk(0%, 11%, 43%, 72%)

Oklch

oklch(37.3% 0.038 91.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

685544

445869

Analogous

694446

685544

696844

Triadic

685544

446955

554469

Split-Comp.

685544

446968

444669

Tetradic

685544

466944

445869

684469

Contrast Matrix WCAG 2.1 Contrast

685544	846934	DF8934	BF4B1C	484029
—	1.4 Fail	2.6 Fail	1.4 Fail	1.5 Fail
1.4 Fail	—	1.9 Fail	1.0 Fail	2.0 Fail
2.6 Fail	1.9 Fail	—	1.8 Fail	3.8 AA Large
1.4 Fail	1.0 Fail	1.8 Fail	—	2.1 Fail
1.5 Fail	2.0 Fail	3.8 AA Large	2.1 Fail	—

White BG

7.1AAA

5.2AA

2.7Fail

5.0AA

10.3AAA

Black BG

3.0Fail

4.1AA Large

7.8AAA

4.2AA Large

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

606048

787841

BAB949

8D8C27

45442F

Deuteranopia

616249

7A7C44

BFC54E

949C2A

454630

Tritanopia

674B4C

834B4D

DB595C

B93032

483334

Achromatopsia

595959

6B6B6B

999999

686868

404040

Shades & Tints Shades & Tints

#685544

Dark

Light

#846934

Dark

Light

#DF8934

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #685544;
  --color-2: #846934;
  --color-3: #df8934;
  --color-4: #bf4b1c;
  --color-5: #484029;
}

SCSS

$color-1: #685544;
$color-2: #846934;
$color-3: #df8934;
$color-4: #bf4b1c;
$color-5: #484029;

TAILWIND

colors: {
  'brand-1': '#685544',
  'brand-2': '#846934',
  'brand-3': '#df8934',
  'brand-4': '#bf4b1c',
  'brand-5': '#484029',
}

RGB Array

[104, 85, 68], [132, 105, 52], [223, 137, 52], [191, 75, 28], [72, 64, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #685544, #846934, #DF8934, #BF4B1C, #484029 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: #685544; --color-2: #846934; --color-3: #df8934; --color-4: #bf4b1c; --color-5: #484029. 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