← Back to Editor

#403026 · #414D47 · #54664D · #8C843A · #A1A621

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#403026

Tangerine · DarkSlateGray · Cinnamon

HEX
#403026
RGB
rgb(64, 48, 38)
HSL
hsl(23, 25%, 20%)
HSB
hsb(23, 41%, 25%)
CMYK
cmyk(0%, 25%, 41%, 75%)
Oklch
oklch(32.4% 0.029 53.4)

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

#414D47

Mineral Blue · DarkSlateGray · Charcoal

HEX
#414D47
RGB
rgb(65, 77, 71)
HSL
hsl(150, 8%, 28%)
HSB
hsb(150, 16%, 30%)
CMYK
cmyk(16%, 0%, 8%, 70%)
Oklch
oklch(40.8% 0.018 163.9)

Traditional「Mineral Blue」· Paint「Charcoal」· Creative Midnight Shadow

#54664D

Celadon · DarkOliveGreen · Forest Green

HEX
#54664D
RGB
rgb(84, 102, 77)
HSL
hsl(103, 14%, 35%)
HSB
hsb(103, 25%, 40%)
CMYK
cmyk(18%, 0%, 25%, 60%)
Oklch
oklch(48.8% 0.045 137.0)

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

#8C843A

Autumn Sage · Sienna · Honey Gold

HEX
#8C843A
RGB
rgb(140, 132, 58)
HSL
hsl(54, 41%, 39%)
HSB
hsb(54, 59%, 55%)
CMYK
cmyk(0%, 6%, 59%, 45%)
Oklch
oklch(60.5% 0.096 103.2)

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

#A1A621

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A1A621
RGB
rgb(161, 166, 33)
HSL
hsl(62, 67%, 39%)
HSB
hsb(62, 80%, 65%)
CMYK
cmyk(3%, 0%, 80%, 35%)
Oklch
oklch(69.9% 0.145 111.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

403026
263640

Analogous

402629
403026
403D26

Triadic

403026
264030
302640

Split-Comp.

403026
26403D
262940

Tetradic

403026
294026
263640
3D2640

Contrast Matrix WCAG 2.1 Contrast

403026
414D47
54664D
8C843A
A1A621
—
1.4
Fail
2.0
Fail
3.3
AA Large
4.8
AA
1.4
Fail
—
1.4
Fail
2.3
Fail
3.4
AA Large
2.0
Fail
1.4
Fail
—
1.6
Fail
2.4
Fail
3.3
AA Large
2.3
Fail
1.6
Fail
—
1.5
Fail
4.8
AA
3.4
AA Large
2.4
Fail
1.5
Fail
—
White BG
12.6AAA
8.8AAA
6.2AA
3.8AA Large
2.6Fail
Black BG
1.7Fail
2.4Fail
3.4AA Large
5.5AA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

393928
464648
5C5C53
89884C
A3A341

Deuteranopia

3A3B29
464549
5B5955
898A50
A3A349

Tritanopia

3F2A2B
424A4A
555859
8C5A5D
A15B60

Achromatopsia

343434
494949
5E5E5E
7E7E7E
959595

Shades & Tints Shades & Tints

#403026

Dark
Light

#414D47

Dark
Light

#54664D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #403026;
  --color-2: #414d47;
  --color-3: #54664d;
  --color-4: #8c843a;
  --color-5: #a1a621;
}

SCSS

$color-1: #403026;
$color-2: #414d47;
$color-3: #54664d;
$color-4: #8c843a;
$color-5: #a1a621;

TAILWIND

colors: {
  'brand-1': '#403026',
  'brand-2': '#414d47',
  'brand-3': '#54664d',
  'brand-4': '#8c843a',
  'brand-5': '#a1a621',
}

RGB Array

[64, 48, 38], [65, 77, 71], [84, 102, 77], [140, 132, 58], [161, 166, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #403026, #414D47, #54664D, #8C843A, #A1A621 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: #403026; --color-2: #414d47; --color-3: #54664d; --color-4: #8c843a; --color-5: #a1a621. 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