← Back to Editor

#9F7F6E · #B49580 · #DCC299 · #836A50 · #73542F

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#9F7F6E

Tangerine · Gray · Warm Sun

HEX
#9F7F6E
RGB
rgb(159, 127, 110)
HSL
hsl(21, 20%, 53%)
HSB
hsb(21, 31%, 62%)
CMYK
cmyk(0%, 20%, 31%, 38%)
Oklch
oklch(62.2% 0.047 49.4)

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

#B49580

Tangerine · Tan · Warm Sun

HEX
#B49580
RGB
rgb(180, 149, 128)
HSL
hsl(24, 26%, 60%)
HSB
hsb(24, 29%, 71%)
CMYK
cmyk(0%, 17%, 29%, 29%)
Oklch
oklch(69.3% 0.048 55.9)

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

#DCC299

Goose Yellow · BurlyWood · Warm Sun

HEX
#DCC299
RGB
rgb(220, 194, 153)
HSL
hsl(37, 49%, 73%)
HSB
hsb(37, 30%, 86%)
CMYK
cmyk(0%, 12%, 30%, 14%)
Oklch
oklch(82.6% 0.062 79.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#836A50

Ochre · DimGray · Amber Brown

HEX
#836A50
RGB
rgb(131, 106, 80)
HSL
hsl(31, 24%, 41%)
HSB
hsb(31, 39%, 51%)
CMYK
cmyk(0%, 19%, 39%, 49%)
Oklch
oklch(54.2% 0.050 67.6)

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

#73542F

Ochre · DarkOliveGreen · Amber Brown

HEX
#73542F
RGB
rgb(115, 84, 47)
HSL
hsl(33, 42%, 32%)
HSB
hsb(33, 59%, 45%)
CMYK
cmyk(0%, 27%, 59%, 55%)
Oklch
oklch(47.0% 0.067 69.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9F7F6E
6F8E9F

Analogous

9F6F76
9F7F6E
9F986F

Triadic

9F7F6E
6F9F80
806F9F

Split-Comp.

9F7F6E
6F9F98
6F769F

Tetradic

9F7F6E
769F6F
6F8E9F
986F9F

Contrast Matrix WCAG 2.1 Contrast

9F7F6E
B49580
DCC299
836A50
73542F
—
1.3
Fail
2.1
Fail
1.4
Fail
1.9
Fail
1.3
Fail
—
1.6
Fail
1.8
Fail
2.5
Fail
2.1
Fail
1.6
Fail
—
2.9
Fail
4.0
AA Large
1.4
Fail
1.8
Fail
2.9
Fail
—
1.4
Fail
1.9
Fail
2.5
Fail
4.0
AA Large
1.4
Fail
—
White BG
3.7AA Large
2.8Fail
1.7Fail
5.1AA
6.9AA
Black BG
5.7AA
7.6AAA
12.2AAA
4.1AA Large
3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

919172
A7A685
D1D1A3
787856
666538

Deuteranopia

939573
A8AB86
D2D4A5
7A7B58
676A3A

Tritanopia

9D7576
B2898A
DBABAC
825B5C
713F41

Achromatopsia

878787
9C9C9C
C5C5C5
6F6F6F
595959

Shades & Tints Shades & Tints

#9F7F6E

Dark
Light

#B49580

Dark
Light

#DCC299

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9f7f6e;
  --color-2: #b49580;
  --color-3: #dcc299;
  --color-4: #836a50;
  --color-5: #73542f;
}

SCSS

$color-1: #9f7f6e;
$color-2: #b49580;
$color-3: #dcc299;
$color-4: #836a50;
$color-5: #73542f;

TAILWIND

colors: {
  'brand-1': '#9f7f6e',
  'brand-2': '#b49580',
  'brand-3': '#dcc299',
  'brand-4': '#836a50',
  'brand-5': '#73542f',
}

RGB Array

[159, 127, 110], [180, 149, 128], [220, 194, 153], [131, 106, 80], [115, 84, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #9F7F6E, #B49580, #DCC299, #836A50, #73542F is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #9f7f6e; --color-2: #b49580; --color-3: #dcc299; --color-4: #836a50; --color-5: #73542f. 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. 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 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