← Back to Editor

#D2AE70 · #747256 · #67654A · #63372E · #363229

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

#D2AE70

Ginger · BurlyWood · Warm Sun

HEX
#D2AE70
RGB
rgb(210, 174, 112)
HSL
hsl(38, 52%, 63%)
HSB
hsb(38, 47%, 82%)
CMYK
cmyk(0%, 17%, 47%, 18%)
Oklch
oklch(76.9% 0.090 80.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#747256

Autumn Sage · DimGray · Honey Gold

HEX
#747256
RGB
rgb(116, 114, 86)
HSL
hsl(56, 15%, 40%)
HSB
hsb(56, 26%, 45%)
CMYK
cmyk(0%, 2%, 26%, 55%)
Oklch
oklch(54.6% 0.041 104.3)

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

#67654A

Autumn Sage · DimGray · Honey Gold

HEX
#67654A
RGB
rgb(103, 101, 74)
HSL
hsl(56, 16%, 35%)
HSB
hsb(56, 28%, 40%)
CMYK
cmyk(0%, 2%, 28%, 60%)
Oklch
oklch(50.1% 0.041 104.2)

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

#63372E

Crimson · DarkOliveGreen · Wine Red

HEX
#63372E
RGB
rgb(99, 55, 46)
HSL
hsl(10, 37%, 28%)
HSB
hsb(10, 54%, 39%)
CMYK
cmyk(0%, 44%, 54%, 61%)
Oklch
oklch(38.9% 0.065 32.5)

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

#363229

Ochre · DarkSlateGray · Amber Gold

HEX
#363229
RGB
rgb(54, 50, 41)
HSL
hsl(42, 14%, 19%)
HSB
hsb(42, 24%, 21%)
CMYK
cmyk(0%, 7%, 24%, 79%)
Oklch
oklch(31.8% 0.016 86.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2AE70
7094D2

Analogous

D27D70
D2AE70
C5D270

Triadic

D2AE70
70D2AE
AE70D2

Split-Comp.

D2AE70
70C5D2
7D70D2

Tetradic

D2AE70
70D27D
7094D2
D270C5

Contrast Matrix WCAG 2.1 Contrast

D2AE70
747256
67654A
63372E
363229
—
2.3
Fail
2.8
Fail
4.7
AA
6.1
AA
2.3
Fail
—
1.2
Fail
2.0
Fail
2.6
Fail
2.8
Fail
1.2
Fail
—
1.7
Fail
2.2
Fail
4.7
AA
2.0
Fail
1.7
Fail
—
1.3
Fail
6.1
AA
2.6
Fail
2.2
Fail
1.3
Fail
—
White BG
2.1Fail
4.9AA
5.9AA
9.9AAA
12.8AAA
Black BG
10.0AAA
4.3AA Large
3.5AA Large
2.1Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C27F
73735D
666651
505030
34342B

Deuteranopia

C5C783
73735E
666652
535631
35352C

Tritanopia

D08B8D
746263
675657
613232
362D2D

Achromatopsia

B2B2B2
6F6F6F
636363
434343
323232

Shades & Tints Shades & Tints

#D2AE70

Dark
Light

#747256

Dark
Light

#67654A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2ae70;
  --color-2: #747256;
  --color-3: #67654a;
  --color-4: #63372e;
  --color-5: #363229;
}

SCSS

$color-1: #d2ae70;
$color-2: #747256;
$color-3: #67654a;
$color-4: #63372e;
$color-5: #363229;

TAILWIND

colors: {
  'brand-1': '#d2ae70',
  'brand-2': '#747256',
  'brand-3': '#67654a',
  'brand-4': '#63372e',
  'brand-5': '#363229',
}

RGB Array

[210, 174, 112], [116, 114, 86], [103, 101, 74], [99, 55, 46], [54, 50, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2AE70, #747256, #67654A, #63372E, #363229 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: #d2ae70; --color-2: #747256; --color-3: #67654a; --color-4: #63372e; --color-5: #363229. 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