← Back to Editor

#A2B188 · #B68D33 · #AD5D42 · #8D3D40 · #681833

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

#A2B188

Willow Green · DarkSeaGreen · Apple Green

HEX
#A2B188
RGB
rgb(162, 177, 136)
HSL
hsl(82, 21%, 61%)
HSB
hsb(82, 23%, 69%)
CMYK
cmyk(8%, 0%, 23%, 31%)
Oklch
oklch(73.8% 0.059 124.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#B68D33

Ochre · DarkGoldenRod · Honey Gold

HEX
#B68D33
RGB
rgb(182, 141, 51)
HSL
hsl(41, 56%, 46%)
HSB
hsb(41, 72%, 71%)
CMYK
cmyk(0%, 23%, 72%, 29%)
Oklch
oklch(66.6% 0.116 83.5)

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

#AD5D42

Tangerine · Sienna · Amber Brown

HEX
#AD5D42
RGB
rgb(173, 93, 66)
HSL
hsl(15, 45%, 47%)
HSB
hsb(15, 62%, 68%)
CMYK
cmyk(0%, 46%, 62%, 32%)
Oklch
oklch(56.6% 0.112 39.3)

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

#8D3D40

Crimson · Sienna · Wine Red

HEX
#8D3D40
RGB
rgb(141, 61, 64)
HSL
hsl(358, 40%, 40%)
HSB
hsb(358, 57%, 55%)
CMYK
cmyk(0%, 57%, 55%, 45%)
Oklch
oklch(46.7% 0.109 20.0)

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

#681833

Dark Violet · Maroon · Raspberry

HEX
#681833
RGB
rgb(104, 24, 51)
HSL
hsl(340, 63%, 25%)
HSB
hsb(340, 77%, 41%)
CMYK
cmyk(0%, 77%, 51%, 59%)
Oklch
oklch(35.2% 0.114 5.0)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A2B188
9687B0

Analogous

B0AB87
A2B188
8CB087

Triadic

A2B188
87A1B0
B087A1

Split-Comp.

A2B188
878CB0
AB87B0

Tetradic

A2B188
87B0AB
9687B0
B0878C

Contrast Matrix WCAG 2.1 Contrast

A2B188
B68D33
AD5D42
8D3D40
681833
—
1.3
Fail
2.1
Fail
3.2
AA Large
5.2
AA
1.3
Fail
—
1.5
Fail
2.4
Fail
3.9
AA Large
2.1
Fail
1.5
Fail
—
1.5
Fail
2.5
Fail
3.2
AA Large
2.4
Fail
1.5
Fail
—
1.6
Fail
5.2
AA
3.9
AA Large
2.5
Fail
1.6
Fail
—
White BG
2.3Fail
3.1AA Large
4.7AA
7.3AAA
11.9AAA
Black BG
9.2AAA
6.8AA
4.4AA Large
2.9Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A992
A4A449
8A8A49
6A6A3F
45452C

Deuteranopia

A8A794
A7AA4E
8F954A
6F753F
4A502B

Tritanopia

A39A9B
B45A5E
A94E4F
893F3F
642726

Achromatopsia

A8A8A8
8F8F8F
727272
555555
333333

Shades & Tints Shades & Tints

#A2B188

Dark
Light

#B68D33

Dark
Light

#AD5D42

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a2b188;
  --color-2: #b68d33;
  --color-3: #ad5d42;
  --color-4: #8d3d40;
  --color-5: #681833;
}

SCSS

$color-1: #a2b188;
$color-2: #b68d33;
$color-3: #ad5d42;
$color-4: #8d3d40;
$color-5: #681833;

TAILWIND

colors: {
  'brand-1': '#a2b188',
  'brand-2': '#b68d33',
  'brand-3': '#ad5d42',
  'brand-4': '#8d3d40',
  'brand-5': '#681833',
}

RGB Array

[162, 177, 136], [182, 141, 51], [173, 93, 66], [141, 61, 64], [104, 24, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A2B188, #B68D33, #AD5D42, #8D3D40, #681833 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: #a2b188; --color-2: #b68d33; --color-3: #ad5d42; --color-4: #8d3d40; --color-5: #681833. 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