← Back to Editor

#7A7977 · #99928A · #EFE4D0 · #D9CDA5 · #E2DAB5

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#7A7977

Ink Gray · Gray · Warm Gray

HEX
#7A7977
RGB
rgb(122, 121, 119)
HSL
hsl(40, 1%, 47%)
HSB
hsb(40, 2%, 48%)
CMYK
cmyk(0%, 1%, 2%, 52%)
Oklch
oklch(57.6% 0.003 84.6)

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

#99928A

Ash · Gray · Silver Sand

HEX
#99928A
RGB
rgb(153, 146, 138)
HSL
hsl(32, 7%, 57%)
HSB
hsb(32, 10%, 60%)
CMYK
cmyk(0%, 5%, 10%, 40%)
Oklch
oklch(66.4% 0.014 71.3)

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

#EFE4D0

Goose Yellow · Bisque · Peach Orange

HEX
#EFE4D0
RGB
rgb(239, 228, 208)
HSL
hsl(39, 49%, 88%)
HSB
hsb(39, 13%, 94%)
CMYK
cmyk(0%, 5%, 13%, 6%)
Oklch
oklch(92.2% 0.029 82.6)

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

#D9CDA5

Goose Yellow · Wheat · Sunflower

HEX
#D9CDA5
RGB
rgb(217, 205, 165)
HSL
hsl(46, 41%, 75%)
HSB
hsb(46, 24%, 85%)
CMYK
cmyk(0%, 6%, 24%, 15%)
Oklch
oklch(84.8% 0.055 93.3)

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

#E2DAB5

Goose Yellow · Wheat · Lemon Cream

HEX
#E2DAB5
RGB
rgb(226, 218, 181)
HSL
hsl(49, 44%, 80%)
HSB
hsb(49, 20%, 89%)
CMYK
cmyk(0%, 4%, 20%, 11%)
Oklch
oklch(88.5% 0.050 97.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7A7977
777779

Analogous

797777
7A7977
797977

Triadic

7A7977
777978
787779

Split-Comp.

7A7977
777979
777779

Tetradic

7A7977
777977
777779
797779

Contrast Matrix WCAG 2.1 Contrast

7A7977
99928A
EFE4D0
D9CDA5
E2DAB5
—
1.4
Fail
3.5
AA Large
2.7
Fail
3.1
AA Large
1.4
Fail
—
2.4
Fail
1.9
Fail
2.2
Fail
3.5
AA Large
2.4
Fail
—
1.3
Fail
1.1
Fail
2.7
Fail
1.9
Fail
1.3
Fail
—
1.1
Fail
3.1
AA Large
2.2
Fail
1.1
Fail
1.1
Fail
—
White BG
4.3AA Large
3.1AA Large
1.3Fail
1.6Fail
1.4Fail
Black BG
4.8AA
6.8AA
16.7AAA
13.2AAA
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7A77
96968C
EAEAD5
D4D4AF
DFDEBE

Deuteranopia

7A7A78
96978C
EBECD6
D5D5B1
DFE0C0

Tritanopia

7A7878
998D8E
EED9DA
D8B6B8
E2C5C7

Achromatopsia

797979
939393
E5E5E5
CCCCCC
D8D8D8

Shades & Tints Shades & Tints

#7A7977

Dark
Light

#99928A

Dark
Light

#EFE4D0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7a7977;
  --color-2: #99928a;
  --color-3: #efe4d0;
  --color-4: #d9cda5;
  --color-5: #e2dab5;
}

SCSS

$color-1: #7a7977;
$color-2: #99928a;
$color-3: #efe4d0;
$color-4: #d9cda5;
$color-5: #e2dab5;

TAILWIND

colors: {
  'brand-1': '#7a7977',
  'brand-2': '#99928a',
  'brand-3': '#efe4d0',
  'brand-4': '#d9cda5',
  'brand-5': '#e2dab5',
}

RGB Array

[122, 121, 119], [153, 146, 138], [239, 228, 208], [217, 205, 165], [226, 218, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #7A7977, #99928A, #EFE4D0, #D9CDA5, #E2DAB5 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #7a7977; --color-2: #99928a; --color-3: #efe4d0; --color-4: #d9cda5; --color-5: #e2dab5. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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