← Back to Editor

#D1A872 · #A1A182 · #675E5A · #DFC390 · #C4A14D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D1A872

Ginger · Tan · Warm Sun

HEX
#D1A872
RGB
rgb(209, 168, 114)
HSL
hsl(34, 51%, 63%)
HSB
hsb(34, 45%, 82%)
CMYK
cmyk(0%, 20%, 45%, 18%)
Oklch
oklch(75.7% 0.086 73.6)

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

#A1A182

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A1A182
RGB
rgb(161, 161, 130)
HSL
hsl(60, 14%, 57%)
HSB
hsb(60, 19%, 63%)
CMYK
cmyk(0%, 0%, 19%, 37%)
Oklch
oklch(70.1% 0.043 107.5)

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

#675E5A

Ink Gray · DimGray · Charcoal

HEX
#675E5A
RGB
rgb(103, 94, 90)
HSL
hsl(18, 7%, 38%)
HSB
hsb(18, 13%, 40%)
CMYK
cmyk(0%, 9%, 13%, 60%)
Oklch
oklch(48.9% 0.013 45.6)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#DFC390

Goose Yellow · BurlyWood · Warm Sun

HEX
#DFC390
RGB
rgb(223, 195, 144)
HSL
hsl(39, 55%, 72%)
HSB
hsb(39, 35%, 87%)
CMYK
cmyk(0%, 13%, 35%, 13%)
Oklch
oklch(82.9% 0.074 82.2)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#C4A14D

Ginger · GoldenRod · Sunflower

HEX
#C4A14D
RGB
rgb(196, 161, 77)
HSL
hsl(42, 50%, 54%)
HSB
hsb(42, 61%, 77%)
CMYK
cmyk(0%, 18%, 61%, 23%)
Oklch
oklch(72.4% 0.111 86.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1A872
719AD1

Analogous

D17771
D1A872
CAD171

Triadic

D1A872
71D1A7
A771D1

Split-Comp.

D1A872
71CAD1
7771D1

Tetradic

D1A872
71D177
719AD1
D171CA

Contrast Matrix WCAG 2.1 Contrast

D1A872
A1A182
675E5A
DFC390
C4A14D
—
1.2
Fail
2.9
Fail
1.3
Fail
1.1
Fail
1.2
Fail
—
2.4
Fail
1.6
Fail
1.1
Fail
2.9
Fail
2.4
Fail
—
3.7
AA Large
2.6
Fail
1.3
Fail
1.6
Fail
3.7
AA Large
—
1.4
Fail
1.1
Fail
1.1
Fail
2.6
Fail
1.4
Fail
—
White BG
2.2Fail
2.6Fail
6.3AA
1.7Fail
2.5Fail
Black BG
9.6AAA
7.9AAA
3.3AA Large
12.3AAA
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBF7F
A1A18A
63635B
D3D39C
B5B561

Deuteranopia

C2C582
A1A18B
64645B
D5D79F
B7BA66

Tritanopia

CF898C
A18F91
675C5C
DEA6A8
C27175

Achromatopsia

AEAEAE
9D9D9D
606060
C6C6C6
A2A2A2

Shades & Tints Shades & Tints

#D1A872

Dark
Light

#A1A182

Dark
Light

#675E5A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1a872;
  --color-2: #a1a182;
  --color-3: #675e5a;
  --color-4: #dfc390;
  --color-5: #c4a14d;
}

SCSS

$color-1: #d1a872;
$color-2: #a1a182;
$color-3: #675e5a;
$color-4: #dfc390;
$color-5: #c4a14d;

TAILWIND

colors: {
  'brand-1': '#d1a872',
  'brand-2': '#a1a182',
  'brand-3': '#675e5a',
  'brand-4': '#dfc390',
  'brand-5': '#c4a14d',
}

RGB Array

[209, 168, 114], [161, 161, 130], [103, 94, 90], [223, 195, 144], [196, 161, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1A872, #A1A182, #675E5A, #DFC390, #C4A14D 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: #d1a872; --color-2: #a1a182; --color-3: #675e5a; --color-4: #dfc390; --color-5: #c4a14d. 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