← Back to Editor

#D4BD79 · #CC5421 · #5E5539 · #749E3C · #D1BB77

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

#D4BD79

Ginger · BurlyWood · Sunflower

HEX
#D4BD79
RGB
rgb(212, 189, 121)
HSL
hsl(45, 51%, 65%)
HSB
hsb(45, 43%, 83%)
CMYK
cmyk(0%, 11%, 43%, 17%)
Oklch
oklch(80.3% 0.091 91.4)

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

#CC5421

Tangerine · Chocolate · Amber Brown

HEX
#CC5421
RGB
rgb(204, 84, 33)
HSL
hsl(18, 72%, 46%)
HSB
hsb(18, 84%, 80%)
CMYK
cmyk(0%, 59%, 84%, 20%)
Oklch
oklch(59.5% 0.165 40.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#5E5539

Ochre · DarkOliveGreen · Honey Gold

HEX
#5E5539
RGB
rgb(94, 85, 57)
HSL
hsl(45, 25%, 30%)
HSB
hsb(45, 39%, 37%)
CMYK
cmyk(0%, 10%, 39%, 63%)
Oklch
oklch(45.1% 0.044 92.3)

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

#749E3C

Grass Green · DarkOliveGreen · Olive Green

HEX
#749E3C
RGB
rgb(116, 158, 60)
HSL
hsl(86, 45%, 43%)
HSB
hsb(86, 62%, 62%)
CMYK
cmyk(27%, 0%, 62%, 38%)
Oklch
oklch(64.8% 0.136 129.2)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#D1BB77

Ginger · BurlyWood · Sunflower

HEX
#D1BB77
RGB
rgb(209, 187, 119)
HSL
hsl(45, 49%, 64%)
HSB
hsb(45, 43%, 82%)
CMYK
cmyk(0%, 11%, 43%, 18%)
Oklch
oklch(79.6% 0.091 92.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4BD79
788FD3

Analogous

D38F78
D4BD79
BDD378

Triadic

D4BD79
78D3BD
BD78D3

Split-Comp.

D4BD79
78BDD3
8F78D3

Tetradic

D4BD79
78D38F
788FD3
D378BD

Contrast Matrix WCAG 2.1 Contrast

D4BD79
CC5421
5E5539
749E3C
D1BB77
—
2.3
Fail
4.0
AA Large
1.7
Fail
1.0
Fail
2.3
Fail
—
1.7
Fail
1.4
Fail
2.3
Fail
4.0
AA Large
1.7
Fail
—
2.4
Fail
3.9
AA Large
1.7
Fail
1.4
Fail
2.4
Fail
—
1.7
Fail
1.0
Fail
2.3
Fail
3.9
AA Large
1.7
Fail
—
White BG
1.8Fail
4.3AA Large
7.4AAA
3.1AA Large
1.9Fail
Black BG
11.4AAA
4.9AA
2.8Fail
6.7AA
11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACA89
98972D
5A5A40
868754
C7C787

Deuteranopia

CBCD8D
9FA830
5B5B41
848159
C9CA8B

Tritanopia

D39699
C63739
5E4546
76666B
D09497

Achromatopsia

BCBCBC
727272
545454
868686
BABABA

Shades & Tints Shades & Tints

#D4BD79

Dark
Light

#CC5421

Dark
Light

#5E5539

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4bd79;
  --color-2: #cc5421;
  --color-3: #5e5539;
  --color-4: #749e3c;
  --color-5: #d1bb77;
}

SCSS

$color-1: #d4bd79;
$color-2: #cc5421;
$color-3: #5e5539;
$color-4: #749e3c;
$color-5: #d1bb77;

TAILWIND

colors: {
  'brand-1': '#d4bd79',
  'brand-2': '#cc5421',
  'brand-3': '#5e5539',
  'brand-4': '#749e3c',
  'brand-5': '#d1bb77',
}

RGB Array

[212, 189, 121], [204, 84, 33], [94, 85, 57], [116, 158, 60], [209, 187, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4BD79, #CC5421, #5E5539, #749E3C, #D1BB77 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: #d4bd79; --color-2: #cc5421; --color-3: #5e5539; --color-4: #749e3c; --color-5: #d1bb77. 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