← Back to Editor

#A09373 · #5B5346 · #C49E77 · #879D77 · #4C8773

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A09373

Ginger · Gray · Sunflower

HEX
#A09373
RGB
rgb(160, 147, 115)
HSL
hsl(43, 19%, 54%)
HSB
hsb(43, 28%, 63%)
CMYK
cmyk(0%, 8%, 28%, 37%)
Oklch
oklch(66.6% 0.047 88.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#5B5346

Ochre · DarkOliveGreen · Amber Brown

HEX
#5B5346
RGB
rgb(91, 83, 70)
HSL
hsl(37, 13%, 32%)
HSB
hsb(37, 23%, 36%)
CMYK
cmyk(0%, 9%, 23%, 64%)
Oklch
oklch(44.6% 0.023 80.0)

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

#C49E77

Ginger · Tan · Warm Sun

HEX
#C49E77
RGB
rgb(196, 158, 119)
HSL
hsl(30, 39%, 62%)
HSB
hsb(30, 39%, 77%)
CMYK
cmyk(0%, 19%, 39%, 23%)
Oklch
oklch(72.5% 0.070 67.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#879D77

Celadon · Gray · Olive Green

HEX
#879D77
RGB
rgb(135, 157, 119)
HSL
hsl(95, 16%, 54%)
HSB
hsb(95, 24%, 62%)
CMYK
cmyk(14%, 0%, 24%, 38%)
Oklch
oklch(66.8% 0.060 132.3)

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

#4C8773

Mineral Blue · SeaGreen · Mint Ice

HEX
#4C8773
RGB
rgb(76, 135, 115)
HSL
hsl(160, 28%, 41%)
HSB
hsb(160, 44%, 53%)
CMYK
cmyk(44%, 0%, 15%, 47%)
Oklch
oklch(57.7% 0.070 169.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A09373
7380A0

Analogous

A07D73
A09373
96A073

Triadic

A09373
73A093
9373A0

Split-Comp.

A09373
7396A0
7D73A0

Tetradic

A09373
73A07D
7380A0
A07396

Contrast Matrix WCAG 2.1 Contrast

A09373
5B5346
C49E77
879D77
4C8773
—
2.5
Fail
1.2
Fail
1.0
Fail
1.4
Fail
2.5
Fail
—
3.1
AA Large
2.6
Fail
1.8
Fail
1.2
Fail
3.1
AA Large
—
1.2
Fail
1.7
Fail
1.0
Fail
2.6
Fail
1.2
Fail
—
1.4
Fail
1.4
Fail
1.8
Fail
1.7
Fail
1.4
Fail
—
White BG
3.0AA Large
7.6AAA
2.5Fail
2.9Fail
4.2AA Large
Black BG
6.9AA
2.8Fail
8.5AAA
7.1AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9A7B
585749
B4B380
919180
666678

Deuteranopia

9B9C7D
58594A
B6B983
8F8E82
625E79

Tritanopia

9F8182
5B4C4C
C2888A
888789
4F7C7D

Achromatopsia

939393
545454
A5A5A5
929292
737373

Shades & Tints Shades & Tints

#A09373

Dark
Light

#5B5346

Dark
Light

#C49E77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a09373;
  --color-2: #5b5346;
  --color-3: #c49e77;
  --color-4: #879d77;
  --color-5: #4c8773;
}

SCSS

$color-1: #a09373;
$color-2: #5b5346;
$color-3: #c49e77;
$color-4: #879d77;
$color-5: #4c8773;

TAILWIND

colors: {
  'brand-1': '#a09373',
  'brand-2': '#5b5346',
  'brand-3': '#c49e77',
  'brand-4': '#879d77',
  'brand-5': '#4c8773',
}

RGB Array

[160, 147, 115], [91, 83, 70], [196, 158, 119], [135, 157, 119], [76, 135, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A09373, #5B5346, #C49E77, #879D77, #4C8773 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #a09373; --color-2: #5b5346; --color-3: #c49e77; --color-4: #879d77; --color-5: #4c8773. 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. Restrained colors convey professionalism and trust. 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