← Back to Editor

#D4B14D · #AF821B · #413326 · #A6A795 · #D7D4C1

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 LibraryData Visualization

Color Details Color Details

#D4B14D

Ginger · SandyBrown · Sunflower

HEX
#D4B14D
RGB
rgb(212, 177, 77)
HSL
hsl(44, 61%, 57%)
HSB
hsb(44, 64%, 83%)
CMYK
cmyk(0%, 17%, 64%, 17%)
Oklch
oklch(77.2% 0.125 89.8)

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

#AF821B

Ochre · DarkGoldenRod · Honey Gold

HEX
#AF821B
RGB
rgb(175, 130, 27)
HSL
hsl(42, 73%, 40%)
HSB
hsb(42, 85%, 69%)
CMYK
cmyk(0%, 26%, 85%, 31%)
Oklch
oklch(63.4% 0.123 82.3)

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

#413326

Tangerine · DarkSlateGray · Cinnamon

HEX
#413326
RGB
rgb(65, 51, 38)
HSL
hsl(29, 26%, 20%)
HSB
hsb(29, 42%, 25%)
CMYK
cmyk(0%, 22%, 42%, 75%)
Oklch
oklch(33.3% 0.030 64.4)

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

#A6A795

Fresh Green · DarkGray · Silver Sand

HEX
#A6A795
RGB
rgb(166, 167, 149)
HSL
hsl(63, 9%, 62%)
HSB
hsb(63, 11%, 65%)
CMYK
cmyk(1%, 0%, 11%, 35%)
Oklch
oklch(72.2% 0.025 109.6)

Traditional「Fresh Green」· Paint「Silver Sand」· Creative Urban Concrete

#D7D4C1

Fresh Green · LightGray · Lemon Cream

HEX
#D7D4C1
RGB
rgb(215, 212, 193)
HSL
hsl(52, 22%, 80%)
HSB
hsb(52, 10%, 84%)
CMYK
cmyk(0%, 1%, 10%, 16%)
Oklch
oklch(86.7% 0.026 99.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4B14D
4E72D4

Analogous

D46E4E
D4B14D
B5D44E

Triadic

D4B14D
4ED4B1
B14ED4

Split-Comp.

D4B14D
4EB5D4
6E4ED4

Tetradic

D4B14D
4ED46E
4E72D4
D44EB5

Contrast Matrix WCAG 2.1 Contrast

D4B14D
AF821B
413326
A6A795
D7D4C1
—
1.7
Fail
5.9
AA
1.2
Fail
1.4
Fail
1.7
Fail
—
3.5
AA Large
1.4
Fail
2.3
Fail
5.9
AA
3.5
AA Large
—
5.0
AA
8.2
AAA
1.2
Fail
1.4
Fail
5.0
AA
—
1.6
Fail
1.4
Fail
2.3
Fail
8.2
AAA
1.6
Fail
—
White BG
2.1Fail
3.5AA Large
12.2AAA
2.4Fail
1.5Fail
Black BG
10.2AAA
6.0AA
1.7Fail
8.6AAA
14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C565
9C9B34
3B3B29
A6A699
D6D6C6

Deuteranopia

C7C96B
9EA23A
3C3D2A
A6A69A
D6D6C7

Tritanopia

D2787D
AD484C
402C2C
A69D9E
D7C9CA

Achromatopsia

B0B0B0
848484
363636
A5A5A5
D3D3D3

Shades & Tints Shades & Tints

#D4B14D

Dark
Light

#AF821B

Dark
Light

#413326

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4b14d;
  --color-2: #af821b;
  --color-3: #413326;
  --color-4: #a6a795;
  --color-5: #d7d4c1;
}

SCSS

$color-1: #d4b14d;
$color-2: #af821b;
$color-3: #413326;
$color-4: #a6a795;
$color-5: #d7d4c1;

TAILWIND

colors: {
  'brand-1': '#d4b14d',
  'brand-2': '#af821b',
  'brand-3': '#413326',
  'brand-4': '#a6a795',
  'brand-5': '#d7d4c1',
}

RGB Array

[212, 177, 77], [175, 130, 27], [65, 51, 38], [166, 167, 149], [215, 212, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4B14D, #AF821B, #413326, #A6A795, #D7D4C1 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #d4b14d; --color-2: #af821b; --color-3: #413326; --color-4: #a6a795; --color-5: #d7d4c1. 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. 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 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