← Back to Editor

#503930 · #5A4E4B · #7F746F · #C1B19B · #E8CEB7

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

#503930

Tangerine · DarkOliveGreen · Cinnamon

HEX
#503930
RGB
rgb(80, 57, 48)
HSL
hsl(17, 25%, 25%)
HSB
hsb(17, 40%, 31%)
CMYK
cmyk(0%, 29%, 40%, 69%)
Oklch
oklch(36.8% 0.036 42.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#5A4E4B

Crimson · DarkOliveGreen · Charcoal

HEX
#5A4E4B
RGB
rgb(90, 78, 75)
HSL
hsl(12, 9%, 32%)
HSB
hsb(12, 17%, 35%)
CMYK
cmyk(0%, 13%, 17%, 65%)
Oklch
oklch(43.5% 0.017 34.3)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#7F746F

Ink Gray · Gray · Warm Gray

HEX
#7F746F
RGB
rgb(127, 116, 111)
HSL
hsl(19, 7%, 47%)
HSB
hsb(19, 13%, 50%)
CMYK
cmyk(0%, 9%, 13%, 50%)
Oklch
oklch(56.7% 0.016 46.1)

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

#C1B19B

Ginger · Tan · Warm Sun

HEX
#C1B19B
RGB
rgb(193, 177, 155)
HSL
hsl(35, 23%, 68%)
HSB
hsb(35, 20%, 76%)
CMYK
cmyk(0%, 8%, 20%, 24%)
Oklch
oklch(76.8% 0.036 75.9)

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

#E8CEB7

Apricot · Wheat · Peach Orange

HEX
#E8CEB7
RGB
rgb(232, 206, 183)
HSL
hsl(28, 52%, 81%)
HSB
hsb(28, 21%, 91%)
CMYK
cmyk(0%, 11%, 21%, 9%)
Oklch
oklch(86.7% 0.043 63.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

503930
304750

Analogous

503037
503930
504930

Triadic

503930
305039
393050

Split-Comp.

503930
305049
303750

Tetradic

503930
375030
304750
493050

Contrast Matrix WCAG 2.1 Contrast

503930
5A4E4B
7F746F
C1B19B
E8CEB7
—
1.3
Fail
2.4
Fail
5.1
AA
7.1
AAA
1.3
Fail
—
1.8
Fail
3.8
AA Large
5.3
AA
2.4
Fail
1.8
Fail
—
2.2
Fail
3.0
AA Large
5.1
AA
3.8
AA Large
2.2
Fail
—
1.4
Fail
7.1
AAA
5.3
AA
3.0
AA Large
1.4
Fail
—
White BG
10.7AAA
8.0AAA
4.5AA
2.1Fail
1.5Fail
Black BG
2.0Fail
2.6Fail
4.6AA
10.0AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

464632
55554C
7A7A70
BABAA0
DDDDBD

Deuteranopia

474933
56564C
7B7C70
BBBCA2
DEE0BE

Tritanopia

4F3434
594C4C
7E7171
C0A5A5
E7C1C2

Achromatopsia

3F3F3F
515151
777777
B3B3B3
D3D3D3

Shades & Tints Shades & Tints

#503930

Dark
Light

#5A4E4B

Dark
Light

#7F746F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #503930;
  --color-2: #5a4e4b;
  --color-3: #7f746f;
  --color-4: #c1b19b;
  --color-5: #e8ceb7;
}

SCSS

$color-1: #503930;
$color-2: #5a4e4b;
$color-3: #7f746f;
$color-4: #c1b19b;
$color-5: #e8ceb7;

TAILWIND

colors: {
  'brand-1': '#503930',
  'brand-2': '#5a4e4b',
  'brand-3': '#7f746f',
  'brand-4': '#c1b19b',
  'brand-5': '#e8ceb7',
}

RGB Array

[80, 57, 48], [90, 78, 75], [127, 116, 111], [193, 177, 155], [232, 206, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #503930, #5A4E4B, #7F746F, #C1B19B, #E8CEB7 is ideal for: brand design, premium product pages, magazine layouts, 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: #503930; --color-2: #5a4e4b; --color-3: #7f746f; --color-4: #c1b19b; --color-5: #e8ceb7. 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. 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