#A7A77B + #5F5F2D + #4B331A + #7A6334 + #A8905F · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A7A77B

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A7A77B

RGB

rgb(167, 167, 123)

HSL

hsl(60, 20%, 57%)

HSB

hsb(60, 26%, 65%)

CMYK

cmyk(0%, 0%, 26%, 35%)

Oklch

oklch(71.7% 0.060 107.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#5F5F2D

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#5F5F2D

RGB

rgb(95, 95, 45)

HSL

hsl(60, 36%, 27%)

HSB

hsb(60, 53%, 37%)

CMYK

cmyk(0%, 0%, 53%, 63%)

Oklch

oklch(47.4% 0.071 108.8)

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

#4B331A

Ochre · DarkOliveGreen · Cinnamon

HEX

#4B331A

RGB

rgb(75, 51, 26)

HSL

hsl(31, 49%, 20%)

HSB

hsb(31, 65%, 29%)

CMYK

cmyk(0%, 32%, 65%, 71%)

Oklch

oklch(34.3% 0.052 65.7)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#7A6334

Ochre · DarkOliveGreen · Honey Gold

HEX

#7A6334

RGB

rgb(122, 99, 52)

HSL

hsl(40, 40%, 34%)

HSB

hsb(40, 57%, 48%)

CMYK

cmyk(0%, 19%, 57%, 52%)

Oklch

oklch(51.2% 0.071 83.8)

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

#A8905F

Ginger · Gray · Sunflower

HEX

#A8905F

RGB

rgb(168, 144, 95)

HSL

hsl(40, 30%, 52%)

HSB

hsb(40, 43%, 66%)

CMYK

cmyk(0%, 14%, 43%, 34%)

Oklch

oklch(66.3% 0.072 84.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7A77B

7B7BA7

Analogous

A7917B

A7A77B

91A77B

Triadic

A7A77B

7BA7A7

A77BA7

Split-Comp.

A7A77B

7B91A7

917BA7

Tetradic

A7A77B

7BA791

7B7BA7

A77B91

Contrast Matrix WCAG 2.1 Contrast

A7A77B	5F5F2D	4B331A	7A6334	A8905F
—	2.7 Fail	4.7 AA	2.3 Fail	1.2 Fail
2.7 Fail	—	1.8 Fail	1.2 Fail	2.2 Fail
4.7 AA	1.8 Fail	—	2.0 Fail	3.8 AA Large
2.3 Fail	1.2 Fail	2.0 Fail	—	1.9 Fail
1.2 Fail	2.2 Fail	3.8 AA Large	1.9 Fail	—

White BG

2.5Fail

6.6AA

11.7AAA

5.7AA

3.1AA Large

Black BG

8.5AAA

3.2AA Large

1.8Fail

3.7AA Large

6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A786

5F5F39

414020

70703F

9E9D6B

Deuteranopia

A7A788

5F5F3C

424422

717342

9FA16E

Tritanopia

A78E90

5F4345

4A2526

79484A

A77476

Achromatopsia

A2A2A2

595959

373737

656565

929292

Shades & Tints Shades & Tints

#A7A77B

Dark

Light

#5F5F2D

Dark

Light

#4B331A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7a77b;
  --color-2: #5f5f2d;
  --color-3: #4b331a;
  --color-4: #7a6334;
  --color-5: #a8905f;
}

SCSS

$color-1: #a7a77b;
$color-2: #5f5f2d;
$color-3: #4b331a;
$color-4: #7a6334;
$color-5: #a8905f;

TAILWIND

colors: {
  'brand-1': '#a7a77b',
  'brand-2': '#5f5f2d',
  'brand-3': '#4b331a',
  'brand-4': '#7a6334',
  'brand-5': '#a8905f',
}

RGB Array

[167, 167, 123], [95, 95, 45], [75, 51, 26], [122, 99, 52], [168, 144, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #A7A77B, #5F5F2D, #4B331A, #7A6334, #A8905F 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: #a7a77b; --color-2: #5f5f2d; --color-3: #4b331a; --color-4: #7a6334; --color-5: #a8905f. 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 space-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