← Back to Editor

#BFAC9D · #9DBFAF · #77B8B1 · #C9795F · #59453E

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BFAC9D

Apricot · DarkGray · Warm Sun

HEX
#BFAC9D
RGB
rgb(191, 172, 157)
HSL
hsl(26, 21%, 68%)
HSB
hsb(26, 18%, 75%)
CMYK
cmyk(0%, 10%, 18%, 25%)
Oklch
oklch(75.7% 0.030 60.6)

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

#9DBFAF

Jade · DarkGray · Apple Green

HEX
#9DBFAF
RGB
rgb(157, 191, 175)
HSL
hsl(152, 21%, 68%)
HSB
hsb(152, 18%, 75%)
CMYK
cmyk(18%, 0%, 8%, 25%)
Oklch
oklch(77.5% 0.043 165.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#77B8B1

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#77B8B1
RGB
rgb(119, 184, 177)
HSL
hsl(174, 31%, 59%)
HSB
hsb(174, 35%, 72%)
CMYK
cmyk(35%, 0%, 4%, 28%)
Oklch
oklch(73.7% 0.067 187.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#C9795F

Tangerine · DarkSalmon · Warm Sun

HEX
#C9795F
RGB
rgb(201, 121, 95)
HSL
hsl(15, 50%, 58%)
HSB
hsb(15, 53%, 79%)
CMYK
cmyk(0%, 40%, 53%, 21%)
Oklch
oklch(65.6% 0.108 38.7)

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

#59453E

Tangerine · DarkOliveGreen · Amber Brown

HEX
#59453E
RGB
rgb(89, 69, 62)
HSL
hsl(16, 18%, 30%)
HSB
hsb(16, 30%, 35%)
CMYK
cmyk(0%, 22%, 30%, 65%)
Oklch
oklch(41.0% 0.030 40.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFAC9D
9CB0BF

Analogous

BF9C9F
BFAC9D
BFBC9C

Triadic

BFAC9D
9CBFAB
AB9CBF

Split-Comp.

BFAC9D
9CBFBC
9C9FBF

Tetradic

BFAC9D
9FBF9C
9CB0BF
BC9CBF

Contrast Matrix WCAG 2.1 Contrast

BFAC9D
9DBFAF
77B8B1
C9795F
59453E
—
1.1
Fail
1.0
Fail
1.5
Fail
4.1
AA Large
1.1
Fail
—
1.1
Fail
1.6
Fail
4.5
AA Large
1.0
Fail
1.1
Fail
—
1.5
Fail
4.0
AA Large
1.5
Fail
1.6
Fail
1.5
Fail
—
2.7
Fail
4.1
AA Large
4.5
AA Large
4.0
AA Large
2.7
Fail
—
White BG
2.2Fail
2.0Fail
2.3Fail
3.3AA Large
9.0AAA
Black BG
9.6AAA
10.5AAA
9.3AAA
6.4AA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7A1
ACACB3
9394B3
A6A665
505040

Deuteranopia

B8B9A2
AAA7B4
8F8BB3
ABB167
525340

Tritanopia

BEA3A4
9FB6B7
7AB4B4
C56A6B
584141

Achromatopsia

B0B0B0
B3B3B3
A4A4A4
8E8E8E
4A4A4A

Shades & Tints Shades & Tints

#BFAC9D

Dark
Light

#9DBFAF

Dark
Light

#77B8B1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfac9d;
  --color-2: #9dbfaf;
  --color-3: #77b8b1;
  --color-4: #c9795f;
  --color-5: #59453e;
}

SCSS

$color-1: #bfac9d;
$color-2: #9dbfaf;
$color-3: #77b8b1;
$color-4: #c9795f;
$color-5: #59453e;

TAILWIND

colors: {
  'brand-1': '#bfac9d',
  'brand-2': '#9dbfaf',
  'brand-3': '#77b8b1',
  'brand-4': '#c9795f',
  'brand-5': '#59453e',
}

RGB Array

[191, 172, 157], [157, 191, 175], [119, 184, 177], [201, 121, 95], [89, 69, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #BFAC9D, #9DBFAF, #77B8B1, #C9795F, #59453E is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #bfac9d; --color-2: #9dbfaf; --color-3: #77b8b1; --color-4: #c9795f; --color-5: #59453e. 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 coffee-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco 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