← Back to Editor

#574A42 · #BF9A56 · #443425 · #130C04 · #D8C4AC

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 LibraryData Visualization

Color Details Color Details

#574A42

Tangerine · DarkOliveGreen · Amber Brown

HEX
#574A42
RGB
rgb(87, 74, 66)
HSL
hsl(23, 14%, 30%)
HSB
hsb(23, 24%, 34%)
CMYK
cmyk(0%, 15%, 24%, 66%)
Oklch
oklch(42.0% 0.022 53.5)

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

#BF9A56

Ginger · SandyBrown · Warm Sun

HEX
#BF9A56
RGB
rgb(191, 154, 86)
HSL
hsl(39, 45%, 54%)
HSB
hsb(39, 55%, 75%)
CMYK
cmyk(0%, 19%, 55%, 25%)
Oklch
oklch(70.6% 0.097 81.3)

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

#443425

Tangerine · DarkSlateGray · Cinnamon

HEX
#443425
RGB
rgb(68, 52, 37)
HSL
hsl(29, 30%, 21%)
HSB
hsb(29, 46%, 27%)
CMYK
cmyk(0%, 24%, 46%, 73%)
Oklch
oklch(33.9% 0.034 64.4)

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

#130C04

Ochre · Black · Cinnamon

HEX
#130C04
RGB
rgb(19, 12, 4)
HSL
hsl(32, 65%, 5%)
HSB
hsb(32, 79%, 7%)
CMYK
cmyk(0%, 37%, 79%, 93%)
Oklch
oklch(16.1% 0.022 74.0)

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

#D8C4AC

Goose Yellow · Silver · Peach Orange

HEX
#D8C4AC
RGB
rgb(216, 196, 172)
HSL
hsl(33, 36%, 76%)
HSB
hsb(33, 20%, 85%)
CMYK
cmyk(0%, 9%, 20%, 15%)
Oklch
oklch(83.1% 0.040 72.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

574A42
424F57

Analogous

574244
574A42
575542

Triadic

574A42
42574A
4A4257

Split-Comp.

574A42
425755
424457

Tetradic

574A42
445742
424F57
554257

Contrast Matrix WCAG 2.1 Contrast

574A42
BF9A56
443425
130C04
D8C4AC
—
3.2
AA Large
1.4
Fail
2.3
Fail
5.0
AA
3.2
AA Large
—
4.5
AA
7.4
AAA
1.6
Fail
1.4
Fail
4.5
AA
—
1.6
Fail
7.0
AAA
2.3
Fail
7.4
AAA
1.6
Fail
—
11.5
AAA
5.0
AA
1.6
Fail
7.0
AAA
11.5
AAA
—
White BG
8.5AAA
2.6Fail
11.9AAA
19.4AAA
1.7Fail
Black BG
2.5Fail
8.0AAA
1.8Fail
1.1Fail
12.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

515144
AFAF66
3D3D29
101006
CFCFB2

Deuteranopia

525344
B1B46A
3E3F2A
101106
D1D2B3

Tritanopia

564546
BD7376
432B2C
130708
D7B6B7

Achromatopsia

4D4D4D
9D9D9D
373737
0D0D0D
C7C7C7

Shades & Tints Shades & Tints

#574A42

Dark
Light

#BF9A56

Dark
Light

#443425

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #574a42;
  --color-2: #bf9a56;
  --color-3: #443425;
  --color-4: #130c04;
  --color-5: #d8c4ac;
}

SCSS

$color-1: #574a42;
$color-2: #bf9a56;
$color-3: #443425;
$color-4: #130c04;
$color-5: #d8c4ac;

TAILWIND

colors: {
  'brand-1': '#574a42',
  'brand-2': '#bf9a56',
  'brand-3': '#443425',
  'brand-4': '#130c04',
  'brand-5': '#d8c4ac',
}

RGB Array

[87, 74, 66], [191, 154, 86], [68, 52, 37], [19, 12, 4], [216, 196, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #574A42, #BF9A56, #443425, #130C04, #D8C4AC is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #574a42; --color-2: #bf9a56; --color-3: #443425; --color-4: #130c04; --color-5: #d8c4ac. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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