← Back to Editor

#AD9271 · #C1AB7D · #D9CB91 · #D4C16D · #C8B241

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

#AD9271

Ginger · Gray · Warm Sun

HEX
#AD9271
RGB
rgb(173, 146, 113)
HSL
hsl(33, 27%, 56%)
HSB
hsb(33, 35%, 68%)
CMYK
cmyk(0%, 16%, 35%, 32%)
Oklch
oklch(67.6% 0.056 72.2)

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

#C1AB7D

Ginger · Tan · Sunflower

HEX
#C1AB7D
RGB
rgb(193, 171, 125)
HSL
hsl(41, 35%, 62%)
HSB
hsb(41, 35%, 76%)
CMYK
cmyk(0%, 11%, 35%, 24%)
Oklch
oklch(74.9% 0.067 85.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D9CB91

Goose Yellow · BurlyWood · Sunflower

HEX
#D9CB91
RGB
rgb(217, 203, 145)
HSL
hsl(48, 49%, 71%)
HSB
hsb(48, 33%, 85%)
CMYK
cmyk(0%, 6%, 33%, 15%)
Oklch
oklch(84.0% 0.077 96.2)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#D4C16D

Ginger · BurlyWood · Sunflower

HEX
#D4C16D
RGB
rgb(212, 193, 109)
HSL
hsl(49, 54%, 63%)
HSB
hsb(49, 49%, 83%)
CMYK
cmyk(0%, 9%, 49%, 17%)
Oklch
oklch(80.9% 0.107 96.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C8B241

Autumn Sage · GoldenRod · Sunflower

HEX
#C8B241
RGB
rgb(200, 178, 65)
HSL
hsl(50, 55%, 52%)
HSB
hsb(50, 68%, 78%)
CMYK
cmyk(0%, 11%, 68%, 22%)
Oklch
oklch(76.2% 0.132 98.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AD9271
718CAD

Analogous

AD7471
AD9271
AAAD71

Triadic

AD9271
71AD92
9271AD

Split-Comp.

AD9271
71AAAD
7471AD

Tetradic

AD9271
71AD74
718CAD
AD71AA

Contrast Matrix WCAG 2.1 Contrast

AD9271
C1AB7D
D9CB91
D4C16D
C8B241
—
1.3
Fail
1.8
Fail
1.6
Fail
1.4
Fail
1.3
Fail
—
1.4
Fail
1.2
Fail
1.1
Fail
1.8
Fail
1.4
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.1
Fail
1.3
Fail
1.2
Fail
—
White BG
2.9Fail
2.2Fail
1.6Fail
1.8Fail
2.1Fail
Black BG
7.1AAA
9.4AAA
12.9AAA
11.6AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A179
B7B788
D3D39F
CCCC81
BEBE5C

Deuteranopia

A3A57B
B9BA8B
D4D5A2
CDCE86
C0C163

Tritanopia

AC7F81
C09193
D8AAAD
D39195
C77277

Achromatopsia

969696
ACACAC
C9C9C9
BDBDBD
ACACAC

Shades & Tints Shades & Tints

#AD9271

Dark
Light

#C1AB7D

Dark
Light

#D9CB91

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ad9271;
  --color-2: #c1ab7d;
  --color-3: #d9cb91;
  --color-4: #d4c16d;
  --color-5: #c8b241;
}

SCSS

$color-1: #ad9271;
$color-2: #c1ab7d;
$color-3: #d9cb91;
$color-4: #d4c16d;
$color-5: #c8b241;

TAILWIND

colors: {
  'brand-1': '#ad9271',
  'brand-2': '#c1ab7d',
  'brand-3': '#d9cb91',
  'brand-4': '#d4c16d',
  'brand-5': '#c8b241',
}

RGB Array

[173, 146, 113], [193, 171, 125], [217, 203, 145], [212, 193, 109], [200, 178, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AD9271, #C1AB7D, #D9CB91, #D4C16D, #C8B241 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: #ad9271; --color-2: #c1ab7d; --color-3: #d9cb91; --color-4: #d4c16d; --color-5: #c8b241. 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