← Back to Editor

#D0B17B · #DDC694 · #F8EAB9 · #B9A08A · #8B8881

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D0B17B

Ginger · Tan · Warm Sun

HEX
#D0B17B
RGB
rgb(208, 177, 123)
HSL
hsl(38, 47%, 65%)
HSB
hsb(38, 41%, 82%)
CMYK
cmyk(0%, 15%, 41%, 18%)
Oklch
oklch(77.5% 0.079 81.0)

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

#DDC694

Goose Yellow · BurlyWood · Sunflower

HEX
#DDC694
RGB
rgb(221, 198, 148)
HSL
hsl(41, 52%, 72%)
HSB
hsb(41, 33%, 87%)
CMYK
cmyk(0%, 10%, 33%, 13%)
Oklch
oklch(83.4% 0.070 86.1)

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

#F8EAB9

Goose Yellow · Wheat · Lemon Cream

HEX
#F8EAB9
RGB
rgb(248, 234, 185)
HSL
hsl(47, 82%, 85%)
HSB
hsb(47, 25%, 97%)
CMYK
cmyk(0%, 6%, 25%, 3%)
Oklch
oklch(93.6% 0.065 94.0)

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

#B9A08A

Apricot · Tan · Warm Sun

HEX
#B9A08A
RGB
rgb(185, 160, 138)
HSL
hsl(28, 25%, 63%)
HSB
hsb(28, 25%, 73%)
CMYK
cmyk(0%, 14%, 25%, 27%)
Oklch
oklch(72.2% 0.043 63.4)

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

#8B8881

Ash · Gray · Warm Gray

HEX
#8B8881
RGB
rgb(139, 136, 129)
HSL
hsl(42, 4%, 53%)
HSB
hsb(42, 7%, 55%)
CMYK
cmyk(0%, 2%, 7%, 45%)
Oklch
oklch(62.7% 0.011 87.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D0B17B
7C9BD0

Analogous

D0877C
D0B17B
C5D07C

Triadic

D0B17B
7CD0B1
B17CD0

Split-Comp.

D0B17B
7CC5D0
877CD0

Tetradic

D0B17B
7CD087
7C9BD0
D07CC5

Contrast Matrix WCAG 2.1 Contrast

D0B17B
DDC694
F8EAB9
B9A08A
8B8881
—
1.2
Fail
1.7
Fail
1.2
Fail
1.7
Fail
1.2
Fail
—
1.4
Fail
1.5
Fail
2.1
Fail
1.7
Fail
1.4
Fail
—
2.1
Fail
2.9
Fail
1.2
Fail
1.5
Fail
2.1
Fail
—
1.4
Fail
1.7
Fail
2.1
Fail
2.9
Fail
1.4
Fail
—
White BG
2.0Fail
1.7Fail
1.2Fail
2.5Fail
3.5AA Large
Black BG
10.3AAA
12.6AAA
17.5AAA
8.5AAA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C288
D3D3A0
F2F2C5
AEAE8F
8A8A83

Deuteranopia

C4C78B
D4D6A3
F3F4C8
B0B291
8A8A83

Tritanopia

CE9295
DCAAAC
F7CED0
B89494
8B8484

Achromatopsia

B4B4B4
C7C7C7
E9E9E9
A5A5A5
888888

Shades & Tints Shades & Tints

#D0B17B

Dark
Light

#DDC694

Dark
Light

#F8EAB9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d0b17b;
  --color-2: #ddc694;
  --color-3: #f8eab9;
  --color-4: #b9a08a;
  --color-5: #8b8881;
}

SCSS

$color-1: #d0b17b;
$color-2: #ddc694;
$color-3: #f8eab9;
$color-4: #b9a08a;
$color-5: #8b8881;

TAILWIND

colors: {
  'brand-1': '#d0b17b',
  'brand-2': '#ddc694',
  'brand-3': '#f8eab9',
  'brand-4': '#b9a08a',
  'brand-5': '#8b8881',
}

RGB Array

[208, 177, 123], [221, 198, 148], [248, 234, 185], [185, 160, 138], [139, 136, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D0B17B, #DDC694, #F8EAB9, #B9A08A, #8B8881 is ideal for: health products, baby brands, fresh-style blogs. 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: #d0b17b; --color-2: #ddc694; --color-3: #f8eab9; --color-4: #b9a08a; --color-5: #8b8881. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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