#D9C086 + #B5B355 + #83A64E + #669E55 + #505E4D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D9C086

Ginger · BurlyWood · Sunflower

HEX

#D9C086

RGB

rgb(217, 192, 134)

HSL

hsl(42, 52%, 69%)

HSB

hsb(42, 38%, 85%)

CMYK

cmyk(0%, 12%, 38%, 15%)

Oklch

oklch(81.6% 0.081 87.2)

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

#B5B355

Autumn Sage · Tan · Sunflower

HEX

#B5B355

RGB

rgb(181, 179, 85)

HSL

hsl(59, 39%, 52%)

HSB

hsb(59, 53%, 71%)

CMYK

cmyk(0%, 1%, 53%, 29%)

Oklch

oklch(74.9% 0.117 107.8)

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

#83A64E

Grass Green · Gray · Olive Green

HEX

#83A64E

RGB

rgb(131, 166, 78)

HSL

hsl(84, 36%, 48%)

HSB

hsb(84, 53%, 65%)

CMYK

cmyk(21%, 0%, 53%, 35%)

Oklch

oklch(67.9% 0.123 127.3)

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

#669E55

Celadon · MediumSeaGreen · Olive Green

HEX

#669E55

RGB

rgb(102, 158, 85)

HSL

hsl(106, 30%, 48%)

HSB

hsb(106, 46%, 62%)

CMYK

cmyk(35%, 0%, 46%, 38%)

Oklch

oklch(64.2% 0.119 138.7)

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

#505E4D

Celadon · DarkOliveGreen · Forest Green

HEX

#505E4D

RGB

rgb(80, 94, 77)

HSL

hsl(109, 10%, 34%)

HSB

hsb(109, 18%, 37%)

CMYK

cmyk(15%, 0%, 18%, 63%)

Oklch

oklch(46.5% 0.032 140.1)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9C086

87A0D9

Analogous

D99787

D9C086

C9D987

Triadic

D9C086

87D9C0

C087D9

Split-Comp.

D9C086

87C9D9

9787D9

Tetradic

D9C086

87D997

87A0D9

D987C9

Contrast Matrix WCAG 2.1 Contrast

D9C086	B5B355	83A64E	669E55	505E4D
—	1.2 Fail	1.6 Fail	1.8 Fail	3.9 AA Large
1.2 Fail	—	1.3 Fail	1.4 Fail	3.1 AA Large
1.6 Fail	1.3 Fail	—	1.1 Fail	2.5 Fail
1.8 Fail	1.4 Fail	1.1 Fail	—	2.2 Fail
3.9 AA Large	3.1 AA Large	2.5 Fail	2.2 Fail	—

White BG

1.8Fail

2.2Fail

2.8Fail

3.2AA Large

6.9AA

Black BG

11.8AAA

9.5AAA

7.5AAA

6.6AA

3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECE94

B4B46C

929263

7E7F67

565651

Deuteranopia

D0D197

B4B471

908E68

7B776B

555452

Tritanopia

D89FA2

B57E82

857478

697578

515455

Achromatopsia

C1C1C1

A9A9A9

929292

858585

585858

Shades & Tints Shades & Tints

#D9C086

Dark

Light

#B5B355

Dark

Light

#83A64E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9c086;
  --color-2: #b5b355;
  --color-3: #83a64e;
  --color-4: #669e55;
  --color-5: #505e4d;
}

SCSS

$color-1: #d9c086;
$color-2: #b5b355;
$color-3: #83a64e;
$color-4: #669e55;
$color-5: #505e4d;

TAILWIND

colors: {
  'brand-1': '#d9c086',
  'brand-2': '#b5b355',
  'brand-3': '#83a64e',
  'brand-4': '#669e55',
  'brand-5': '#505e4d',
}

RGB Array

[217, 192, 134], [181, 179, 85], [131, 166, 78], [102, 158, 85], [80, 94, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9C086, #B5B355, #83A64E, #669E55, #505E4D 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: #d9c086; --color-2: #b5b355; --color-3: #83a64e; --color-4: #669e55; --color-5: #505e4d. 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