← Back to Editor

#AD8679 · #8A7974 · #576666 · #3D4040 · #1F1F1F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#AD8679

Tangerine · Gray · Warm Sun

HEX
#AD8679
RGB
rgb(173, 134, 121)
HSL
hsl(15, 24%, 58%)
HSB
hsb(15, 30%, 68%)
CMYK
cmyk(0%, 23%, 30%, 32%)
Oklch
oklch(65.4% 0.052 39.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#8A7974

Crimson · Gray · Warm Gray

HEX
#8A7974
RGB
rgb(138, 121, 116)
HSL
hsl(14, 9%, 50%)
HSB
hsb(14, 16%, 54%)
CMYK
cmyk(0%, 12%, 16%, 46%)
Oklch
oklch(59.0% 0.022 37.0)

Traditional「Crimson」· Paint「Warm Gray」· Creative Urban Concrete

#576666

Slate Blue · DimGray · Charcoal

HEX
#576666
RGB
rgb(87, 102, 102)
HSL
hsl(180, 8%, 37%)
HSB
hsb(180, 15%, 40%)
CMYK
cmyk(15%, 0%, 0%, 60%)
Oklch
oklch(49.8% 0.018 196.6)

Traditional「Slate Blue」· Paint「Charcoal」· Creative Midnight Shadow

#3D4040

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3D4040
RGB
rgb(61, 64, 64)
HSL
hsl(180, 2%, 25%)
HSB
hsb(180, 5%, 25%)
CMYK
cmyk(5%, 0%, 0%, 75%)
Oklch
oklch(36.9% 0.004 197.0)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#1F1F1F

Ink Black · Black · Dark Stone

HEX
#1F1F1F
RGB
rgb(31, 31, 31)
HSL
hsl(0, 0%, 12%)
HSB
hsb(0, 0%, 12%)
CMYK
cmyk(0%, 0%, 0%, 88%)
Oklch
oklch(23.9% 0.000 89.9)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AD8679
7AA1AE

Analogous

AE7A87
AD8679
AEA17A

Triadic

AD8679
7AAE87
877AAE

Split-Comp.

AD8679
7AAEA1
7A87AE

Tetradic

AD8679
87AE7A
7AA1AE
A17AAE

Contrast Matrix WCAG 2.1 Contrast

AD8679
8A7974
576666
3D4040
1F1F1F
—
1.3
Fail
1.8
Fail
3.2
AA Large
5.1
AA
1.3
Fail
—
1.4
Fail
2.5
Fail
4.0
AA Large
1.8
Fail
1.4
Fail
—
1.7
Fail
2.7
Fail
3.2
AA Large
2.5
Fail
1.7
Fail
—
1.6
Fail
5.1
AA
4.0
AA Large
2.7
Fail
1.6
Fail
—
White BG
3.2AA Large
4.1AA Large
6.0AA
10.5AAA
16.5AAA
Black BG
6.5AA
5.1AA
3.5AA Large
2.0Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9C7C
838275
5D5E66
3E3E40
1F1F1F

Deuteranopia

9EA17D
848575
5D5C66
3E3E40
1F1F1F

Tritanopia

AB7F7F
897676
586666
3D4040
1F1F1F

Achromatopsia

909090
7E7E7E
626262
3F3F3F
1F1F1F

Shades & Tints Shades & Tints

#AD8679

Dark
Light

#8A7974

Dark
Light

#576666

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ad8679;
  --color-2: #8a7974;
  --color-3: #576666;
  --color-4: #3d4040;
  --color-5: #1f1f1f;
}

SCSS

$color-1: #ad8679;
$color-2: #8a7974;
$color-3: #576666;
$color-4: #3d4040;
$color-5: #1f1f1f;

TAILWIND

colors: {
  'brand-1': '#ad8679',
  'brand-2': '#8a7974',
  'brand-3': '#576666',
  'brand-4': '#3d4040',
  'brand-5': '#1f1f1f',
}

RGB Array

[173, 134, 121], [138, 121, 116], [87, 102, 102], [61, 64, 64], [31, 31, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AD8679, #8A7974, #576666, #3D4040, #1F1F1F 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: #ad8679; --color-2: #8a7974; --color-3: #576666; --color-4: #3d4040; --color-5: #1f1f1f. 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