#BAC7A3 + #69674A + #9EB151 + #646444 + #A2A224 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BAC7A3

Willow Green · Silver · Apple Green

HEX

#BAC7A3

RGB

rgb(186, 199, 163)

HSL

hsl(82, 24%, 71%)

HSB

hsb(82, 18%, 78%)

CMYK

cmyk(7%, 0%, 18%, 22%)

Oklch

oklch(81.0% 0.051 123.7)

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

#69674A

Autumn Sage · DimGray · Honey Gold

HEX

#69674A

RGB

rgb(105, 103, 74)

HSL

hsl(56, 17%, 35%)

HSB

hsb(56, 30%, 41%)

CMYK

cmyk(0%, 2%, 30%, 59%)

Oklch

oklch(50.8% 0.043 104.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#9EB151

Grass Green · DarkSeaGreen · Olive Green

HEX

#9EB151

RGB

rgb(158, 177, 81)

HSL

hsl(72, 38%, 51%)

HSB

hsb(72, 54%, 69%)

CMYK

cmyk(11%, 0%, 54%, 31%)

Oklch

oklch(72.5% 0.124 118.9)

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

#646444

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#646444

RGB

rgb(100, 100, 68)

HSL

hsl(60, 19%, 33%)

HSB

hsb(60, 32%, 39%)

CMYK

cmyk(0%, 0%, 32%, 61%)

Oklch

oklch(49.5% 0.048 108.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#A2A224

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#A2A224

RGB

rgb(162, 162, 36)

HSL

hsl(60, 64%, 39%)

HSB

hsb(60, 78%, 64%)

CMYK

cmyk(0%, 0%, 78%, 36%)

Oklch

oklch(69.1% 0.139 109.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BAC7A3

B0A3C7

Analogous

C7C2A3

BAC7A3

A8C7A3

Triadic

BAC7A3

A3BAC7

C7A3BA

Split-Comp.

BAC7A3

A3A8C7

C2A3C7

Tetradic

BAC7A3

A3C7C2

B0A3C7

C7A3A8

Contrast Matrix WCAG 2.1 Contrast

BAC7A3	69674A	9EB151	646444	A2A224
—	3.2 AA Large	1.3 Fail	3.4 AA Large	1.5 Fail
3.2 AA Large	—	2.4 Fail	1.1 Fail	2.1 Fail
1.3 Fail	2.4 Fail	—	2.6 Fail	1.1 Fail
3.4 AA Large	1.1 Fail	2.6 Fail	—	2.2 Fail
1.5 Fail	2.1 Fail	1.1 Fail	2.2 Fail	—

White BG

1.8Fail

5.8AA

2.4Fail

6.1AA

2.7Fail

Black BG

11.8AAA

3.6AA Large

8.9AAA

3.4AA Large

7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C0AC

686851

A6A668

64644C

A2A242

Deuteranopia

BFBEAE

686853

A5A46E

64644E

A2A24A

Tritanopia

BBB3B4

695758

9F7B7F

645253

A25B60

Achromatopsia

BFBFBF

646464

A0A0A0

606060

949494

Shades & Tints Shades & Tints

#BAC7A3

Dark

Light

#69674A

Dark

Light

#9EB151

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bac7a3;
  --color-2: #69674a;
  --color-3: #9eb151;
  --color-4: #646444;
  --color-5: #a2a224;
}

SCSS

$color-1: #bac7a3;
$color-2: #69674a;
$color-3: #9eb151;
$color-4: #646444;
$color-5: #a2a224;

TAILWIND

colors: {
  'brand-1': '#bac7a3',
  'brand-2': '#69674a',
  'brand-3': '#9eb151',
  'brand-4': '#646444',
  'brand-5': '#a2a224',
}

RGB Array

[186, 199, 163], [105, 103, 74], [158, 177, 81], [100, 100, 68], [162, 162, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BAC7A3, #69674A, #9EB151, #646444, #A2A224 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: #bac7a3; --color-2: #69674a; --color-3: #9eb151; --color-4: #646444; --color-5: #a2a224. 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