← Back to Editor

#D8C79D · #ABBB9B · #B0B071 · #D99F4B · #B55C2C

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

#D8C79D

Goose Yellow · Tan · Sunflower

HEX
#D8C79D
RGB
rgb(216, 199, 157)
HSL
hsl(43, 43%, 73%)
HSB
hsb(43, 27%, 85%)
CMYK
cmyk(0%, 8%, 27%, 15%)
Oklch
oklch(83.3% 0.059 88.6)

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

#ABBB9B

Celadon · DarkGray · Apple Green

HEX
#ABBB9B
RGB
rgb(171, 187, 155)
HSL
hsl(90, 19%, 67%)
HSB
hsb(90, 17%, 73%)
CMYK
cmyk(9%, 0%, 17%, 27%)
Oklch
oklch(77.1% 0.048 129.2)

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

#B0B071

Autumn Sage · Tan · Sunflower

HEX
#B0B071
RGB
rgb(176, 176, 113)
HSL
hsl(60, 29%, 57%)
HSB
hsb(60, 36%, 69%)
CMYK
cmyk(0%, 0%, 36%, 31%)
Oklch
oklch(74.2% 0.084 108.3)

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

#D99F4B

Ginger · SandyBrown · Warm Sun

HEX
#D99F4B
RGB
rgb(217, 159, 75)
HSL
hsl(35, 65%, 57%)
HSB
hsb(35, 65%, 85%)
CMYK
cmyk(0%, 27%, 65%, 15%)
Oklch
oklch(74.2% 0.122 73.9)

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

#B55C2C

Tangerine · Sienna · Amber Brown

HEX
#B55C2C
RGB
rgb(181, 92, 44)
HSL
hsl(21, 61%, 44%)
HSB
hsb(21, 76%, 71%)
CMYK
cmyk(0%, 49%, 76%, 29%)
Oklch
oklch(57.3% 0.131 46.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8C79D
9DADD8

Analogous

D8A99D
D8C79D
CBD89D

Triadic

D8C79D
9DD8C7
C79DD8

Split-Comp.

D8C79D
9DCBD8
A99DD8

Tetradic

D8C79D
9DD8A9
9DADD8
D89DCB

Contrast Matrix WCAG 2.1 Contrast

D8C79D
ABBB9B
B0B071
D99F4B
B55C2C
—
1.2
Fail
1.4
Fail
1.4
Fail
2.8
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
2.3
Fail
1.4
Fail
1.1
Fail
—
1.0
Fail
2.1
Fail
1.4
Fail
1.1
Fail
1.0
Fail
—
2.0
Fail
2.8
Fail
2.3
Fail
2.1
Fail
2.0
Fail
—
White BG
1.7Fail
2.0Fail
2.3Fail
2.3Fail
4.6AA
Black BG
12.6AAA
10.3AAA
9.3AAA
9.0AAA
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D0A7
B2B2A3
B0B080
C0BF5F
8E8E38

Deuteranopia

D2D3AA
B1B0A5
B0B084
C3C864
949A3A

Tritanopia

D7AFB1
ACA9AA
B08C8F
D66F73
B14143

Achromatopsia

C7C7C7
B3B3B3
A9A9A9
A7A7A7
717171

Shades & Tints Shades & Tints

#D8C79D

Dark
Light

#ABBB9B

Dark
Light

#B0B071

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8c79d;
  --color-2: #abbb9b;
  --color-3: #b0b071;
  --color-4: #d99f4b;
  --color-5: #b55c2c;
}

SCSS

$color-1: #d8c79d;
$color-2: #abbb9b;
$color-3: #b0b071;
$color-4: #d99f4b;
$color-5: #b55c2c;

TAILWIND

colors: {
  'brand-1': '#d8c79d',
  'brand-2': '#abbb9b',
  'brand-3': '#b0b071',
  'brand-4': '#d99f4b',
  'brand-5': '#b55c2c',
}

RGB Array

[216, 199, 157], [171, 187, 155], [176, 176, 113], [217, 159, 75], [181, 92, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8C79D, #ABBB9B, #B0B071, #D99F4B, #B55C2C 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: #d8c79d; --color-2: #abbb9b; --color-3: #b0b071; --color-4: #d99f4b; --color-5: #b55c2c. 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