#A8BB51 + #AC9642 + #9D4828 + #71282E + #4C3649 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A8BB51

Grass Green · DarkSeaGreen · Olive Green

HEX

#A8BB51

RGB

rgb(168, 187, 81)

HSL

hsl(71, 44%, 53%)

HSB

hsb(71, 57%, 73%)

CMYK

cmyk(10%, 0%, 57%, 27%)

Oklch

oklch(75.6% 0.133 118.2)

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

#AC9642

Ochre · DarkGoldenRod · Honey Gold

HEX

#AC9642

RGB

rgb(172, 150, 66)

HSL

hsl(48, 45%, 47%)

HSB

hsb(48, 62%, 67%)

CMYK

cmyk(0%, 13%, 62%, 33%)

Oklch

oklch(67.6% 0.107 94.7)

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

#9D4828

Tangerine · Sienna · Amber Brown

HEX

#9D4828

RGB

rgb(157, 72, 40)

HSL

hsl(16, 59%, 39%)

HSB

hsb(16, 75%, 62%)

CMYK

cmyk(0%, 54%, 75%, 38%)

Oklch

oklch(50.5% 0.122 40.4)

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

#71282E

Crimson · Brown · Wine Red

HEX

#71282E

RGB

rgb(113, 40, 46)

HSL

hsl(355, 48%, 30%)

HSB

hsb(355, 65%, 44%)

CMYK

cmyk(0%, 65%, 59%, 56%)

Oklch

oklch(38.7% 0.103 18.5)

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

#4C3649

Rose Purple · DarkSlateGray · Eggplant

HEX

#4C3649

RGB

rgb(76, 54, 73)

HSL

hsl(308, 17%, 25%)

HSB

hsb(308, 29%, 30%)

CMYK

cmyk(0%, 29%, 4%, 70%)

Oklch

oklch(36.5% 0.044 331.2)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8BB51

6652BC

Analogous

BC9A52

A8BB51

74BC52

Triadic

A8BB51

52A9BC

BC52A9

Split-Comp.

A8BB51

5274BC

9A52BC

Tetradic

A8BB51

52BC9A

6652BC

BC5274

Contrast Matrix WCAG 2.1 Contrast

A8BB51	AC9642	9D4828	71282E	4C3649
—	1.4 Fail	2.9 Fail	4.8 AA	5.1 AA
1.4 Fail	—	2.1 Fail	3.5 AA Large	3.7 AA Large
2.9 Fail	2.1 Fail	—	1.7 Fail	1.8 Fail
4.8 AA	3.5 AA Large	1.7 Fail	—	1.1 Fail
5.1 AA	3.7 AA Large	1.8 Fail	1.1 Fail	—

White BG

2.1Fail

2.9Fail

6.2AA

10.3AAA

10.9AAA

Black BG

9.9AAA

7.2AAA

3.4AA Large

2.0Fail

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0B06B

A2A256

787730

51512D

424244

Deuteranopia

AFAE71

A4A55B

7D8432

565B2C

444543

Tritanopia

A97F83

AB666A

993637

6D2B2B

4B4140

Achromatopsia

A9A9A9

939393

5E5E5E

3F3F3F

Shades & Tints Shades & Tints

#A8BB51

Dark

Light

#AC9642

Dark

Light

#9D4828

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8bb51;
  --color-2: #ac9642;
  --color-3: #9d4828;
  --color-4: #71282e;
  --color-5: #4c3649;
}

SCSS

$color-1: #a8bb51;
$color-2: #ac9642;
$color-3: #9d4828;
$color-4: #71282e;
$color-5: #4c3649;

TAILWIND

colors: {
  'brand-1': '#a8bb51',
  'brand-2': '#ac9642',
  'brand-3': '#9d4828',
  'brand-4': '#71282e',
  'brand-5': '#4c3649',
}

RGB Array

[168, 187, 81], [172, 150, 66], [157, 72, 40], [113, 40, 46], [76, 54, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A8BB51, #AC9642, #9D4828, #71282E, #4C3649 is ideal for: tech websites, dark mode UIs, game UIs. 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: #a8bb51; --color-2: #ac9642; --color-3: #9d4828; --color-4: #71282e; --color-5: #4c3649. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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