← Back to Editor

#C3BE94 · #929347 · #875860 · #C18E97 · #C6D3DC

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

#C3BE94

Fresh Green · Tan · Sunflower

HEX
#C3BE94
RGB
rgb(195, 190, 148)
HSL
hsl(54, 28%, 67%)
HSB
hsb(54, 24%, 76%)
CMYK
cmyk(0%, 3%, 24%, 24%)
Oklch
oklch(79.5% 0.057 101.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#929347

Autumn Sage · Gray · Honey Gold

HEX
#929347
RGB
rgb(146, 147, 71)
HSL
hsl(61, 35%, 43%)
HSB
hsb(61, 52%, 58%)
CMYK
cmyk(1%, 0%, 52%, 42%)
Oklch
oklch(64.6% 0.099 109.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#875860

Crimson · DimGray · Passion Red

HEX
#875860
RGB
rgb(135, 88, 96)
HSL
hsl(350, 21%, 44%)
HSB
hsb(350, 35%, 53%)
CMYK
cmyk(0%, 35%, 29%, 47%)
Oklch
oklch(51.4% 0.063 8.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#C18E97

Peach Pink · DarkGray · Coral Red

HEX
#C18E97
RGB
rgb(193, 142, 151)
HSL
hsl(349, 29%, 66%)
HSB
hsb(349, 26%, 76%)
CMYK
cmyk(0%, 26%, 22%, 24%)
Oklch
oklch(69.8% 0.063 7.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#C6D3DC

Sky Blue · LightGray · Sky Blue

HEX
#C6D3DC
RGB
rgb(198, 211, 220)
HSL
hsl(205, 24%, 82%)
HSB
hsb(205, 10%, 86%)
CMYK
cmyk(10%, 4%, 0%, 14%)
Oklch
oklch(86.0% 0.019 237.8)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3BE94
9398C2

Analogous

C2A693
C3BE94
B0C293

Triadic

C3BE94
93C2BE
BE93C2

Split-Comp.

C3BE94
93B0C2
A693C2

Tetradic

C3BE94
93C2A6
9398C2
C293B0

Contrast Matrix WCAG 2.1 Contrast

C3BE94
929347
875860
C18E97
C6D3DC
—
1.7
Fail
3.1
AA Large
1.5
Fail
1.2
Fail
1.7
Fail
—
1.8
Fail
1.2
Fail
2.1
Fail
3.1
AA Large
1.8
Fail
—
2.1
Fail
3.8
AA Large
1.5
Fail
1.2
Fail
2.1
Fail
—
1.8
Fail
1.2
Fail
2.1
Fail
3.8
AA Large
1.8
Fail
—
White BG
1.9Fail
3.2AA Large
5.8AA
2.8Fail
1.5Fail
Black BG
11.1AAA
6.5AA
3.6AA Large
7.6AAA
13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C19E
929259
73725E
ABAA95
CCCCDA

Deuteranopia

C1C2A1
92925E
75795E
AEB294
CBCAD9

Tritanopia

C3A6A8
92686B
855D5C
BE9393
C7D8D8

Achromatopsia

BBBBBB
8A8A8A
676767
9E9E9E
D0D0D0

Shades & Tints Shades & Tints

#C3BE94

Dark
Light

#929347

Dark
Light

#875860

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3be94;
  --color-2: #929347;
  --color-3: #875860;
  --color-4: #c18e97;
  --color-5: #c6d3dc;
}

SCSS

$color-1: #c3be94;
$color-2: #929347;
$color-3: #875860;
$color-4: #c18e97;
$color-5: #c6d3dc;

TAILWIND

colors: {
  'brand-1': '#c3be94',
  'brand-2': '#929347',
  'brand-3': '#875860',
  'brand-4': '#c18e97',
  'brand-5': '#c6d3dc',
}

RGB Array

[195, 190, 148], [146, 147, 71], [135, 88, 96], [193, 142, 151], [198, 211, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #C3BE94, #929347, #875860, #C18E97, #C6D3DC 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: #c3be94; --color-2: #929347; --color-3: #875860; --color-4: #c18e97; --color-5: #c6d3dc. 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