← Back to Editor

#A8A587 · #8B9677 · #46574D · #910A0A · #1F1818

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#A8A587

Autumn Sage · DarkGray · Sunflower

HEX
#A8A587
RGB
rgb(168, 165, 135)
HSL
hsl(55, 16%, 59%)
HSB
hsb(55, 20%, 66%)
CMYK
cmyk(0%, 2%, 20%, 34%)
Oklch
oklch(71.6% 0.042 102.7)

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

#8B9677

Grass Green · Gray · Olive Green

HEX
#8B9677
RGB
rgb(139, 150, 119)
HSL
hsl(81, 13%, 53%)
HSB
hsb(81, 21%, 59%)
CMYK
cmyk(7%, 0%, 21%, 41%)
Oklch
oklch(65.6% 0.046 123.5)

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

#46574D

Celadon · DarkSlateGray · Forest Green

HEX
#46574D
RGB
rgb(70, 87, 77)
HSL
hsl(145, 11%, 31%)
HSB
hsb(145, 20%, 34%)
CMYK
cmyk(20%, 0%, 11%, 66%)
Oklch
oklch(43.9% 0.027 159.3)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#910A0A

Vermilion · DarkRed · Wine Red

HEX
#910A0A
RGB
rgb(145, 10, 10)
HSL
hsl(0, 87%, 30%)
HSB
hsb(0, 93%, 57%)
CMYK
cmyk(0%, 93%, 93%, 43%)
Oklch
oklch(41.7% 0.165 28.4)

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

#1F1818

Crimson · Black · Deep Berry

HEX
#1F1818
RGB
rgb(31, 24, 24)
HSL
hsl(0, 13%, 11%)
HSB
hsb(0, 23%, 12%)
CMYK
cmyk(0%, 23%, 23%, 88%)
Oklch
oklch(21.8% 0.011 18.1)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8A587
8689A7

Analogous

A79486
A8A587
99A786

Triadic

A8A587
86A7A4
A486A7

Split-Comp.

A8A587
8699A7
9486A7

Tetradic

A8A587
86A794
8689A7
A78699

Contrast Matrix WCAG 2.1 Contrast

A8A587
8B9677
46574D
910A0A
1F1818
—
1.2
Fail
3.1
AA Large
3.7
AA Large
7.0
AA
1.2
Fail
—
2.5
Fail
3.0
Fail
5.6
AA
3.1
AA Large
2.5
Fail
—
1.2
Fail
2.3
Fail
3.7
AA Large
3.0
Fail
1.2
Fail
—
1.9
Fail
7.0
AA
5.6
AA
2.3
Fail
1.9
Fail
—
White BG
2.5Fail
3.1AA Large
7.7AAA
9.3AAA
17.5AAA
Black BG
8.4AAA
6.7AA
2.7Fail
2.3Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A78E
90907F
4D4E4F
57550A
1C1C18

Deuteranopia

A7A790
8F8E80
4C4B50
5E690A
1C1D18

Tritanopia

A89495
8C8486
475152
8A0A0A
1F1818

Achromatopsia

A2A2A2
8F8F8F
515151
323232
1A1A1A

Shades & Tints Shades & Tints

#A8A587

Dark
Light

#8B9677

Dark
Light

#46574D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8a587;
  --color-2: #8b9677;
  --color-3: #46574d;
  --color-4: #910a0a;
  --color-5: #1f1818;
}

SCSS

$color-1: #a8a587;
$color-2: #8b9677;
$color-3: #46574d;
$color-4: #910a0a;
$color-5: #1f1818;

TAILWIND

colors: {
  'brand-1': '#a8a587',
  'brand-2': '#8b9677',
  'brand-3': '#46574d',
  'brand-4': '#910a0a',
  'brand-5': '#1f1818',
}

RGB Array

[168, 165, 135], [139, 150, 119], [70, 87, 77], [145, 10, 10], [31, 24, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A8A587, #8B9677, #46574D, #910A0A, #1F1818 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #a8a587; --color-2: #8b9677; --color-3: #46574d; --color-4: #910a0a; --color-5: #1f1818. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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