← Back to Editor

#876556 · #BA7B72 · #B79DBA · #6ADB7D · #CAD889

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

#876556

Tangerine · DimGray · Amber Brown

HEX
#876556
RGB
rgb(135, 101, 86)
HSL
hsl(18, 22%, 43%)
HSB
hsb(18, 36%, 53%)
CMYK
cmyk(0%, 25%, 36%, 47%)
Oklch
oklch(53.7% 0.050 44.9)

TraditionalTangerine」· PaintAmber Brown」· Creative Blush Sunrise

#BA7B72

Crimson · DarkSalmon · Passion Red

HEX
#BA7B72
RGB
rgb(186, 123, 114)
HSL
hsl(7, 34%, 59%)
HSB
hsb(7, 39%, 73%)
CMYK
cmyk(0%, 34%, 39%, 27%)
Oklch
oklch(64.6% 0.081 28.4)

TraditionalCrimson」· PaintPassion Red」· Creative Blush Sunrise

#B79DBA

Lilac · DarkGray · Lilac Purple

HEX
#B79DBA
RGB
rgb(183, 157, 186)
HSL
hsl(294, 17%, 67%)
HSB
hsb(294, 16%, 73%)
CMYK
cmyk(2%, 16%, 0%, 27%)
Oklch
oklch(72.8% 0.051 322.8)

TraditionalLilac」· PaintLilac Purple」· Creative Lavender Dream

#6ADB7D

Emerald · LightGreen · Apple Green

HEX
#6ADB7D
RGB
rgb(106, 219, 125)
HSL
hsl(130, 61%, 64%)
HSB
hsb(130, 52%, 86%)
CMYK
cmyk(52%, 0%, 43%, 14%)
Oklch
oklch(80.3% 0.167 147.4)

TraditionalEmerald」· PaintApple Green」· Creative Mint Breeze

#CAD889

Willow Green · Tan · Apple Green

HEX
#CAD889
RGB
rgb(202, 216, 137)
HSL
hsl(71, 50%, 69%)
HSB
hsb(71, 37%, 85%)
CMYK
cmyk(6%, 0%, 37%, 15%)
Oklch
oklch(85.3% 0.103 116.8)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

876556
567786

Analogous

86565F
876556
867C56

Triadic

876556
568664
645686

Split-Comp.

876556
56867C
565F86

Tetradic

876556
5F8656
567786
7C5686

Contrast Matrix WCAG 2.1 Contrast

876556
BA7B72
B79DBA
6ADB7D
CAD889
1.5
Fail
2.1
Fail
3.0
Fail
3.4
AA Large
1.5
Fail
1.4
Fail
2.0
Fail
2.2
Fail
2.1
Fail
1.4
Fail
1.4
Fail
1.6
Fail
3.0
Fail
2.0
Fail
1.4
Fail
1.1
Fail
3.4
AA Large
2.2
Fail
1.6
Fail
1.1
Fail
White BG
5.2AA
3.4AA Large
2.5Fail
1.7Fail
1.5Fail
Black BG
4.0AA Large
6.2AA
8.5AAA
12.0AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

78785A
9F9E74
ACACB3
9B9C94
D0D09C

Deuteranopia

7A7D5B
A2A775
ADAFB1
948C99
CFCEA1

Tritanopia

855C5D
B77676
B6ADAC
70A6AA
CBABAF

Achromatopsia

6D6D6D
8D8D8D
A8A8A8
AEAEAE
CBCBCB

Shades & Tints Shades & Tints

#876556

Dark
Light

#BA7B72

Dark
Light

#B79DBA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #876556;
  --color-2: #ba7b72;
  --color-3: #b79dba;
  --color-4: #6adb7d;
  --color-5: #cad889;
}

SCSS

$color-1: #876556;
$color-2: #ba7b72;
$color-3: #b79dba;
$color-4: #6adb7d;
$color-5: #cad889;

TAILWIND

colors: {
  'brand-1': '#876556',
  'brand-2': '#ba7b72',
  'brand-3': '#b79dba',
  'brand-4': '#6adb7d',
  'brand-5': '#cad889',
}

RGB Array

[135, 101, 86], [186, 123, 114], [183, 157, 186], [106, 219, 125], [202, 216, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #876556, #BA7B72, #B79DBA, #6ADB7D, #CAD889 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: #876556; --color-2: #ba7b72; --color-3: #b79dba; --color-4: #6adb7d; --color-5: #cad889. 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