← Back to Editor

#56422A · #826443 · #9D8C58 · #BEC078 · #D9DF7F

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

#56422A

Ochre · DarkOliveGreen · Cinnamon

HEX
#56422A
RGB
rgb(86, 66, 42)
HSL
hsl(33, 34%, 25%)
HSB
hsb(33, 51%, 34%)
CMYK
cmyk(0%, 23%, 51%, 66%)
Oklch
oklch(39.4% 0.046 70.9)

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

#826443

Ochre · Sienna · Amber Brown

HEX
#826443
RGB
rgb(130, 100, 67)
HSL
hsl(31, 32%, 39%)
HSB
hsb(31, 48%, 51%)
CMYK
cmyk(0%, 23%, 48%, 49%)
Oklch
oklch(52.5% 0.061 68.5)

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

#9D8C58

Ochre · Gray · Honey Gold

HEX
#9D8C58
RGB
rgb(157, 140, 88)
HSL
hsl(45, 28%, 48%)
HSB
hsb(45, 44%, 62%)
CMYK
cmyk(0%, 11%, 44%, 38%)
Oklch
oklch(64.3% 0.073 92.0)

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

#BEC078

Fresh Green · Tan · Sunflower

HEX
#BEC078
RGB
rgb(190, 192, 120)
HSL
hsl(62, 36%, 61%)
HSB
hsb(62, 38%, 75%)
CMYK
cmyk(1%, 0%, 38%, 25%)
Oklch
oklch(79.0% 0.094 109.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D9DF7F

Fresh Green · Khaki · Sunflower

HEX
#D9DF7F
RGB
rgb(217, 223, 127)
HSL
hsl(64, 60%, 69%)
HSB
hsb(64, 43%, 87%)
CMYK
cmyk(3%, 0%, 43%, 13%)
Oklch
oklch(87.8% 0.120 111.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

56422A
2A3E55

Analogous

552C2A
56422A
53552A

Triadic

56422A
2A5542
422A55

Split-Comp.

56422A
2A5355
2C2A55

Tetradic

56422A
2A552C
2A3E55
552A53

Contrast Matrix WCAG 2.1 Contrast

56422A
826443
9D8C58
BEC078
D9DF7F
—
1.7
Fail
2.9
Fail
5.0
AA
6.7
AA
1.7
Fail
—
1.6
Fail
2.9
Fail
3.8
AA Large
2.9
Fail
1.6
Fail
—
1.7
Fail
2.3
Fail
5.0
AA
2.9
Fail
1.7
Fail
—
1.3
Fail
6.7
AA
3.8
AA Large
2.3
Fail
1.3
Fail
—
White BG
9.5AAA
5.5AA
3.3AA Large
1.9Fail
1.4Fail
Black BG
2.2Fail
3.9AA Large
6.3AA
11.0AAA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4D30
75754B
969565
BFBF89
DCDC96

Deuteranopia

4F5031
77794D
979868
BFBF8E
DBDB9C

Tritanopia

553435
815153
9C6F71
BE979A
D9A9AD

Achromatopsia

454545
696969
8B8B8B
B7B7B7
D2D2D2

Shades & Tints Shades & Tints

#56422A

Dark
Light

#826443

Dark
Light

#9D8C58

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #56422a;
  --color-2: #826443;
  --color-3: #9d8c58;
  --color-4: #bec078;
  --color-5: #d9df7f;
}

SCSS

$color-1: #56422a;
$color-2: #826443;
$color-3: #9d8c58;
$color-4: #bec078;
$color-5: #d9df7f;

TAILWIND

colors: {
  'brand-1': '#56422a',
  'brand-2': '#826443',
  'brand-3': '#9d8c58',
  'brand-4': '#bec078',
  'brand-5': '#d9df7f',
}

RGB Array

[86, 66, 42], [130, 100, 67], [157, 140, 88], [190, 192, 120], [217, 223, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #56422A, #826443, #9D8C58, #BEC078, #D9DF7F is ideal for: 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: #56422a; --color-2: #826443; --color-3: #9d8c58; --color-4: #bec078; --color-5: #d9df7f. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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