#A3A19C + #D0B5B0 + #D9C6AF + #E2D8AD + #E7DEB8 · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A3A19C

Ash · DarkGray · Silver Sand

HEX

#A3A19C

RGB

rgb(163, 161, 156)

HSL

hsl(43, 4%, 63%)

HSB

hsb(43, 4%, 64%)

CMYK

cmyk(0%, 1%, 4%, 36%)

Oklch

oklch(70.9% 0.008 88.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#D0B5B0

Peach Pink · Silver · Coral Red

HEX

#D0B5B0

RGB

rgb(208, 181, 176)

HSL

hsl(9, 25%, 75%)

HSB

hsb(9, 15%, 82%)

CMYK

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

Oklch

oklch(79.5% 0.032 30.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D9C6AF

Goose Yellow · Silver · Peach Orange

HEX

#D9C6AF

RGB

rgb(217, 198, 175)

HSL

hsl(33, 36%, 77%)

HSB

hsb(33, 19%, 85%)

CMYK

cmyk(0%, 9%, 19%, 15%)

Oklch

oklch(83.6% 0.038 72.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E2D8AD

Goose Yellow · Wheat · Lemon Cream

HEX

#E2D8AD

RGB

rgb(226, 216, 173)

HSL

hsl(49, 48%, 78%)

HSB

hsb(49, 23%, 89%)

CMYK

cmyk(0%, 4%, 23%, 11%)

Oklch

oklch(88.0% 0.058 96.5)

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

#E7DEB8

Goose Yellow · Wheat · Lemon Cream

HEX

#E7DEB8

RGB

rgb(231, 222, 184)

HSL

hsl(49, 49%, 81%)

HSB

hsb(49, 20%, 91%)

CMYK

cmyk(0%, 4%, 20%, 9%)

Oklch

oklch(89.8% 0.051 96.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3A19C

9D9FA4

Analogous

A49F9D

A3A19C

A3A49D

Triadic

A3A19C

9DA4A2

A29DA4

Split-Comp.

A3A19C

9DA3A4

9F9DA4

Tetradic

A3A19C

9DA49F

9D9FA4

A49DA3

Contrast Matrix WCAG 2.1 Contrast

A3A19C	D0B5B0	D9C6AF	E2D8AD	E7DEB8
—	1.3 Fail	1.6 Fail	1.8 Fail	1.9 Fail
1.3 Fail	—	1.2 Fail	1.3 Fail	1.4 Fail
1.6 Fail	1.2 Fail	—	1.2 Fail	1.2 Fail
1.8 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
1.9 Fail	1.4 Fail	1.2 Fail	1.1 Fail	—

White BG

2.6Fail

1.9Fail

1.7Fail

1.4Fail

Black BG

8.1AAA

10.9AAA

12.6AAA

14.7AAA

15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A29D

C4C4B1

D1D1B5

DEDEB7

E3E3C1

Deuteranopia

A2A29E

C6C8B2

D2D3B6

DEDFBA

E4E4C3

Tritanopia

A39E9E

CFB2B2

D8B9BA

E2C0C1

E7C8CA

Achromatopsia

A1A1A1

BDBDBD

C9C9C9

D6D6D6

DCDCDC

Shades & Tints Shades & Tints

#A3A19C

Dark

Light

#D0B5B0

Dark

Light

#D9C6AF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3a19c;
  --color-2: #d0b5b0;
  --color-3: #d9c6af;
  --color-4: #e2d8ad;
  --color-5: #e7deb8;
}

SCSS

$color-1: #a3a19c;
$color-2: #d0b5b0;
$color-3: #d9c6af;
$color-4: #e2d8ad;
$color-5: #e7deb8;

TAILWIND

colors: {
  'brand-1': '#a3a19c',
  'brand-2': '#d0b5b0',
  'brand-3': '#d9c6af',
  'brand-4': '#e2d8ad',
  'brand-5': '#e7deb8',
}

RGB Array

[163, 161, 156], [208, 181, 176], [217, 198, 175], [226, 216, 173], [231, 222, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #A3A19C, #D0B5B0, #D9C6AF, #E2D8AD, #E7DEB8 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: #a3a19c; --color-2: #d0b5b0; --color-3: #d9c6af; --color-4: #e2d8ad; --color-5: #e7deb8. 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 coffee-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