← Back to Editor

#5E4747 · #856C5F · #ABA478 · #B2B886 · #C2D982

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

#5E4747

Crimson · DarkOliveGreen · Wine Red

HEX
#5E4747
RGB
rgb(94, 71, 71)
HSL
hsl(0, 14%, 32%)
HSB
hsb(0, 24%, 37%)
CMYK
cmyk(0%, 24%, 24%, 63%)
Oklch
oklch(42.2% 0.032 18.5)

TraditionalCrimson」· PaintWine Red」· Creative Blush Sunrise

#856C5F

Tangerine · DimGray · Amber Brown

HEX
#856C5F
RGB
rgb(133, 108, 95)
HSL
hsl(21, 17%, 45%)
HSB
hsb(21, 29%, 52%)
CMYK
cmyk(0%, 19%, 29%, 48%)
Oklch
oklch(55.2% 0.038 49.0)

TraditionalTangerine」· PaintAmber Brown」· Creative Blush Sunrise

#ABA478

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ABA478
RGB
rgb(171, 164, 120)
HSL
hsl(52, 23%, 57%)
HSB
hsb(52, 30%, 67%)
CMYK
cmyk(0%, 4%, 30%, 33%)
Oklch
oklch(71.4% 0.061 100.1)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

#B2B886

Fresh Green · Tan · Sunflower

HEX
#B2B886
RGB
rgb(178, 184, 134)
HSL
hsl(67, 26%, 62%)
HSB
hsb(67, 27%, 72%)
CMYK
cmyk(3%, 0%, 27%, 28%)
Oklch
oklch(76.5% 0.068 113.6)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#C2D982

Willow Green · Tan · Apple Green

HEX
#C2D982
RGB
rgb(194, 217, 130)
HSL
hsl(76, 53%, 68%)
HSB
hsb(76, 40%, 85%)
CMYK
cmyk(11%, 0%, 40%, 15%)
Oklch
oklch(84.8% 0.115 121.0)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E4747
465D5D

Analogous

5D4652
5E4747
5D5246

Triadic

5E4747
465D46
46465D

Split-Comp.

5E4747
465D52
46525D

Tetradic

5E4747
525D46
465D5D
52465D

Contrast Matrix WCAG 2.1 Contrast

5E4747
856C5F
ABA478
B2B886
C2D982
1.7
Fail
3.4
AA Large
4.1
AA Large
5.5
AA
1.7
Fail
1.9
Fail
2.3
Fail
3.1
AA Large
3.4
AA Large
1.9
Fail
1.2
Fail
1.6
Fail
4.1
AA Large
2.3
Fail
1.2
Fail
1.3
Fail
5.5
AA
3.1
AA Large
1.6
Fail
1.3
Fail
White BG
8.5AAA
4.9AA
2.5Fail
2.1Fail
1.6Fail
Black BG
2.5Fail
4.3AA Large
8.3AAA
10.1AAA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

545447
7A7A62
A8A883
B5B592
CCCC97

Deuteranopia

555747
7C7E63
A8A985
B4B495
CBC99C

Tritanopia

5D4747
846565
AB8B8D
B29C9E
C3A8AB

Achromatopsia

4E4E4E
727272
A1A1A1
B1B1B1
C8C8C8

Shades & Tints Shades & Tints

#5E4747

Dark
Light

#856C5F

Dark
Light

#ABA478

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e4747;
  --color-2: #856c5f;
  --color-3: #aba478;
  --color-4: #b2b886;
  --color-5: #c2d982;
}

SCSS

$color-1: #5e4747;
$color-2: #856c5f;
$color-3: #aba478;
$color-4: #b2b886;
$color-5: #c2d982;

TAILWIND

colors: {
  'brand-1': '#5e4747',
  'brand-2': '#856c5f',
  'brand-3': '#aba478',
  'brand-4': '#b2b886',
  'brand-5': '#c2d982',
}

RGB Array

[94, 71, 71], [133, 108, 95], [171, 164, 120], [178, 184, 134], [194, 217, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5E4747, #856C5F, #ABA478, #B2B886, #C2D982 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: #5e4747; --color-2: #856c5f; --color-3: #aba478; --color-4: #b2b886; --color-5: #c2d982. 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