← Back to Editor

#D1B687 · #C2A15A · #A2976A · #A5B199 · #C5C59F

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

#D1B687

Ginger · Tan · Warm Sun

HEX
#D1B687
RGB
rgb(209, 182, 135)
HSL
hsl(38, 45%, 67%)
HSB
hsb(38, 35%, 82%)
CMYK
cmyk(0%, 13%, 35%, 18%)
Oklch
oklch(78.8% 0.070 81.2)

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

#C2A15A

Ginger · SandyBrown · Sunflower

HEX
#C2A15A
RGB
rgb(194, 161, 90)
HSL
hsl(41, 46%, 56%)
HSB
hsb(41, 54%, 76%)
CMYK
cmyk(0%, 17%, 54%, 24%)
Oklch
oklch(72.4% 0.098 85.0)

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

#A2976A

Ginger · Gray · Sunflower

HEX
#A2976A
RGB
rgb(162, 151, 106)
HSL
hsl(48, 23%, 53%)
HSB
hsb(48, 35%, 64%)
CMYK
cmyk(0%, 7%, 35%, 36%)
Oklch
oklch(67.5% 0.063 96.0)

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

#A5B199

Celadon · DarkGray · Apple Green

HEX
#A5B199
RGB
rgb(165, 177, 153)
HSL
hsl(90, 13%, 65%)
HSB
hsb(90, 14%, 69%)
CMYK
cmyk(7%, 0%, 14%, 31%)
Oklch
oklch(74.4% 0.036 129.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#C5C59F

Fresh Green · Tan · Sunflower

HEX
#C5C59F
RGB
rgb(197, 197, 159)
HSL
hsl(60, 25%, 70%)
HSB
hsb(60, 19%, 77%)
CMYK
cmyk(0%, 0%, 19%, 23%)
Oklch
oklch(81.4% 0.051 107.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1B687
85A1D1

Analogous

D18F85
D1B687
C7D185

Triadic

D1B687
85D1B5
B585D1

Split-Comp.

D1B687
85C7D1
8F85D1

Tetradic

D1B687
85D18F
85A1D1
D185C7

Contrast Matrix WCAG 2.1 Contrast

D1B687
C2A15A
A2976A
A5B199
C5C59F
—
1.3
Fail
1.5
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
1.2
Fail
1.1
Fail
1.4
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
1.7
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
1.3
Fail
1.1
Fail
1.4
Fail
1.7
Fail
1.3
Fail
—
White BG
2.0Fail
2.5Fail
2.9Fail
2.2Fail
1.8Fail
Black BG
10.8AAA
8.5AAA
7.2AAA
9.3AAA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C592
B4B36B
9D9D75
AAAA9F
C5C5A8

Deuteranopia

C7C995
B6B86F
9E9F77
AAA9A0
C5C5AA

Tritanopia

D09B9D
C0797C
A17D7F
A6A3A4
C5AFB1

Achromatopsia

B9B9B9
A3A3A3
959595
ABABAB
C1C1C1

Shades & Tints Shades & Tints

#D1B687

Dark
Light

#C2A15A

Dark
Light

#A2976A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1b687;
  --color-2: #c2a15a;
  --color-3: #a2976a;
  --color-4: #a5b199;
  --color-5: #c5c59f;
}

SCSS

$color-1: #d1b687;
$color-2: #c2a15a;
$color-3: #a2976a;
$color-4: #a5b199;
$color-5: #c5c59f;

TAILWIND

colors: {
  'brand-1': '#d1b687',
  'brand-2': '#c2a15a',
  'brand-3': '#a2976a',
  'brand-4': '#a5b199',
  'brand-5': '#c5c59f',
}

RGB Array

[209, 182, 135], [194, 161, 90], [162, 151, 106], [165, 177, 153], [197, 197, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1B687, #C2A15A, #A2976A, #A5B199, #C5C59F 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: #d1b687; --color-2: #c2a15a; --color-3: #a2976a; --color-4: #a5b199; --color-5: #c5c59f. 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