← Back to Editor

#558C65 · #D0C791 · #B49A4A · #A67929 · #453A1D

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

#558C65

Celadon · DimGray · Olive Green

HEX
#558C65
RGB
rgb(85, 140, 101)
HSL
hsl(137, 24%, 44%)
HSB
hsb(137, 39%, 55%)
CMYK
cmyk(39%, 0%, 28%, 45%)
Oklch
oklch(59.1% 0.084 152.4)

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

#D0C791

Fresh Green · Tan · Sunflower

HEX
#D0C791
RGB
rgb(208, 199, 145)
HSL
hsl(51, 40%, 69%)
HSB
hsb(51, 30%, 82%)
CMYK
cmyk(0%, 4%, 30%, 18%)
Oklch
oklch(82.4% 0.072 99.8)

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

#B49A4A

Ochre · GoldenRod · Honey Gold

HEX
#B49A4A
RGB
rgb(180, 154, 74)
HSL
hsl(45, 42%, 50%)
HSB
hsb(45, 59%, 71%)
CMYK
cmyk(0%, 14%, 59%, 29%)
Oklch
oklch(69.3% 0.104 91.5)

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

#A67929

Ochre · DarkGoldenRod · Amber Brown

HEX
#A67929
RGB
rgb(166, 121, 41)
HSL
hsl(38, 60%, 41%)
HSB
hsb(38, 75%, 65%)
CMYK
cmyk(0%, 27%, 75%, 35%)
Oklch
oklch(60.7% 0.109 77.9)

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

#453A1D

Ochre · DarkOliveGreen · Amber Gold

HEX
#453A1D
RGB
rgb(69, 58, 29)
HSL
hsl(44, 41%, 19%)
HSB
hsb(44, 58%, 27%)
CMYK
cmyk(0%, 16%, 58%, 73%)
Oklch
oklch(35.3% 0.047 89.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

558C65
8B557C

Analogous

618B55
558C65
558B7F

Triadic

558C65
65558B
8B6555

Split-Comp.

558C65
7F558B
8B5561

Tetradic

558C65
55618B
8B557C
8B7F55

Contrast Matrix WCAG 2.1 Contrast

558C65
D0C791
B49A4A
A67929
453A1D
—
2.3
Fail
1.4
Fail
1.0
Fail
2.8
Fail
2.3
Fail
—
1.6
Fail
2.3
Fail
6.5
AA
1.4
Fail
1.6
Fail
—
1.4
Fail
4.1
AA Large
1.0
Fail
2.3
Fail
1.4
Fail
—
2.9
Fail
2.8
Fail
6.5
AA
4.1
AA Large
2.9
Fail
—
White BG
3.9AA Large
1.7Fail
2.7Fail
3.9AA Large
11.2AAA
Black BG
5.3AA
12.3AAA
7.7AAA
5.4AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D6E
CCCC9E
A9A95D
93923C
404024

Deuteranopia

6A6671
CDCDA1
AAAC62
959941
414226

Tritanopia

587678
D0A8AB
B36D70
A44C4F
442A2B

Achromatopsia

777777
C4C4C4
999999
7D7D7D
3A3A3A

Shades & Tints Shades & Tints

#558C65

Dark
Light

#D0C791

Dark
Light

#B49A4A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #558c65;
  --color-2: #d0c791;
  --color-3: #b49a4a;
  --color-4: #a67929;
  --color-5: #453a1d;
}

SCSS

$color-1: #558c65;
$color-2: #d0c791;
$color-3: #b49a4a;
$color-4: #a67929;
$color-5: #453a1d;

TAILWIND

colors: {
  'brand-1': '#558c65',
  'brand-2': '#d0c791',
  'brand-3': '#b49a4a',
  'brand-4': '#a67929',
  'brand-5': '#453a1d',
}

RGB Array

[85, 140, 101], [208, 199, 145], [180, 154, 74], [166, 121, 41], [69, 58, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #558C65, #D0C791, #B49A4A, #A67929, #453A1D 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: #558c65; --color-2: #d0c791; --color-3: #b49a4a; --color-4: #a67929; --color-5: #453a1d. 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