#43526F + #667D60 + #A39348 + #B17F20 + #805204 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#43526F

Indigo · DarkSlateBlue · Prussian Blue

HEX

#43526F

RGB

rgb(67, 82, 111)

HSL

hsl(220, 25%, 35%)

HSB

hsb(220, 40%, 44%)

CMYK

cmyk(40%, 26%, 0%, 56%)

Oklch

oklch(43.8% 0.052 263.2)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#667D60

Celadon · DimGray · Olive Green

HEX

#667D60

RGB

rgb(102, 125, 96)

HSL

hsl(108, 13%, 43%)

HSB

hsb(108, 23%, 49%)

CMYK

cmyk(18%, 0%, 23%, 51%)

Oklch

oklch(56.3% 0.051 139.2)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#A39348

Ochre · DarkGoldenRod · Honey Gold

HEX

#A39348

RGB

rgb(163, 147, 72)

HSL

hsl(49, 39%, 46%)

HSB

hsb(49, 56%, 64%)

CMYK

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

Oklch

oklch(66.2% 0.098 97.5)

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

#B17F20

Ochre · DarkGoldenRod · Amber Brown

HEX

#B17F20

RGB

rgb(177, 127, 32)

HSL

hsl(39, 69%, 41%)

HSB

hsb(39, 82%, 69%)

CMYK

cmyk(0%, 28%, 82%, 31%)

Oklch

oklch(63.1% 0.121 78.2)

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

#805204

Ochre · Olive · Amber Brown

HEX

#805204

RGB

rgb(128, 82, 4)

HSL

hsl(38, 94%, 26%)

HSB

hsb(38, 97%, 50%)

CMYK

cmyk(0%, 36%, 97%, 50%)

Oklch

oklch(47.9% 0.101 71.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

43526F

706143

Analogous

436870

43526F

4A4370

Triadic

43526F

704352

527043

Split-Comp.

43526F

704A43

687043

Tetradic

43526F

704368

706143

43704A

Contrast Matrix WCAG 2.1 Contrast

43526F	667D60	A39348	B17F20	805204
—	1.7 Fail	2.6 Fail	2.2 Fail	1.2 Fail
1.7 Fail	—	1.5 Fail	1.3 Fail	1.5 Fail
2.6 Fail	1.5 Fail	—	1.2 Fail	2.2 Fail
2.2 Fail	1.3 Fail	1.2 Fail	—	1.9 Fail
1.2 Fail	1.5 Fail	2.2 Fail	1.9 Fail	—

White BG

7.9AAA

4.5AA Large

3.1AA Large

3.5AA Large

6.7AA

Black BG

2.7Fail

4.7AA

6.8AA

5.9AA

3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

494A68

707067

9C9C5A

9B9B37

6C6C17

Deuteranopia

494866

6F6D69

9D9E5F

9EA23D

6F721B

Tritanopia

446261

676D6E

A2686C

AF494D

7E2629

Achromatopsia

515151

737373

8F8F8F

838383

575757

Shades & Tints Shades & Tints

#43526F

Dark

Light

#667D60

Dark

Light

#A39348

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #43526f;
  --color-2: #667d60;
  --color-3: #a39348;
  --color-4: #b17f20;
  --color-5: #805204;
}

SCSS

$color-1: #43526f;
$color-2: #667d60;
$color-3: #a39348;
$color-4: #b17f20;
$color-5: #805204;

TAILWIND

colors: {
  'brand-1': '#43526f',
  'brand-2': '#667d60',
  'brand-3': '#a39348',
  'brand-4': '#b17f20',
  'brand-5': '#805204',
}

RGB Array

[67, 82, 111], [102, 125, 96], [163, 147, 72], [177, 127, 32], [128, 82, 4]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #43526F, #667D60, #A39348, #B17F20, #805204 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: #43526f; --color-2: #667d60; --color-3: #a39348; --color-4: #b17f20; --color-5: #805204. 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 warm-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