← Back to Editor

#889A82 · #584326 · #A14F43 · #9B6424 · #B0B191

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

#889A82

Celadon · Gray · Olive Green

HEX
#889A82
RGB
rgb(136, 154, 130)
HSL
hsl(105, 11%, 56%)
HSB
hsb(105, 16%, 60%)
CMYK
cmyk(12%, 0%, 16%, 40%)
Oklch
oklch(66.5% 0.040 137.9)

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

#584326

Ochre · DarkOliveGreen · Cinnamon

HEX
#584326
RGB
rgb(88, 67, 38)
HSL
hsl(35, 40%, 25%)
HSB
hsb(35, 57%, 35%)
CMYK
cmyk(0%, 24%, 57%, 65%)
Oklch
oklch(39.8% 0.052 74.3)

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

#A14F43

Crimson · Sienna · Passion Red

HEX
#A14F43
RGB
rgb(161, 79, 67)
HSL
hsl(8, 41%, 45%)
HSB
hsb(8, 58%, 63%)
CMYK
cmyk(0%, 51%, 58%, 37%)
Oklch
oklch(52.6% 0.111 29.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#9B6424

Ochre · Sienna · Amber Brown

HEX
#9B6424
RGB
rgb(155, 100, 36)
HSL
hsl(32, 62%, 37%)
HSB
hsb(32, 77%, 61%)
CMYK
cmyk(0%, 35%, 77%, 39%)
Oklch
oklch(55.1% 0.105 66.0)

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

#B0B191

Fresh Green · DarkGray · Sunflower

HEX
#B0B191
RGB
rgb(176, 177, 145)
HSL
hsl(62, 17%, 63%)
HSB
hsb(62, 18%, 69%)
CMYK
cmyk(1%, 0%, 18%, 31%)
Oklch
oklch(75.1% 0.044 108.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

889A82
95829B

Analogous

959B82
889A82
829B89

Triadic

889A82
82899B
9B8289

Split-Comp.

889A82
89829B
9B8295

Tetradic

889A82
82959B
95829B
9B8982

Contrast Matrix WCAG 2.1 Contrast

889A82
584326
A14F43
9B6424
B0B191
—
3.1
AA Large
1.9
Fail
1.6
Fail
1.4
Fail
3.1
AA Large
—
1.7
Fail
1.9
Fail
4.2
AA Large
1.9
Fail
1.7
Fail
—
1.1
Fail
2.6
Fail
1.6
Fail
1.9
Fail
1.1
Fail
—
2.2
Fail
1.4
Fail
4.2
AA Large
2.6
Fail
2.2
Fail
—
White BG
3.0AA Large
9.4AAA
5.7AA
5.0AA
2.2Fail
Black BG
7.0AA
2.2Fail
3.7AA Large
4.2AA Large
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

909088
4F4F2D
7D7D46
838333
B0B099

Deuteranopia

8F8D89
50522F
828847
868B37
B0B09B

Tritanopia

898C8D
573334
9D4849
984042
B09FA0

Achromatopsia

929292
464646
666666
6D6D6D
ADADAD

Shades & Tints Shades & Tints

#889A82

Dark
Light

#584326

Dark
Light

#A14F43

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #889a82;
  --color-2: #584326;
  --color-3: #a14f43;
  --color-4: #9b6424;
  --color-5: #b0b191;
}

SCSS

$color-1: #889a82;
$color-2: #584326;
$color-3: #a14f43;
$color-4: #9b6424;
$color-5: #b0b191;

TAILWIND

colors: {
  'brand-1': '#889a82',
  'brand-2': '#584326',
  'brand-3': '#a14f43',
  'brand-4': '#9b6424',
  'brand-5': '#b0b191',
}

RGB Array

[136, 154, 130], [88, 67, 38], [161, 79, 67], [155, 100, 36], [176, 177, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #889A82, #584326, #A14F43, #9B6424, #B0B191 is ideal for: corporate websites, product showcases, portfolios. 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: #889a82; --color-2: #584326; --color-3: #a14f43; --color-4: #9b6424; --color-5: #b0b191. 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. 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