← Back to Editor

#19404F · #5F796E · #F2DCA2 · #5D3F23 · #3A2716

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 LibraryData Visualization

Color Details Color Details

#19404F

Lake Blue · DarkSlateGray · Peacock Green

HEX
#19404F
RGB
rgb(25, 64, 79)
HSL
hsl(197, 52%, 20%)
HSB
hsb(197, 68%, 31%)
CMYK
cmyk(68%, 19%, 0%, 69%)
Oklch
oklch(35.1% 0.051 226.3)

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

#5F796E

Mineral Blue · DimGray · Olive Green

HEX
#5F796E
RGB
rgb(95, 121, 110)
HSL
hsl(155, 12%, 42%)
HSB
hsb(155, 21%, 47%)
CMYK
cmyk(21%, 0%, 9%, 53%)
Oklch
oklch(55.2% 0.035 167.4)

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

#F2DCA2

Goose Yellow · Wheat · Lemon Cream

HEX
#F2DCA2
RGB
rgb(242, 220, 162)
HSL
hsl(44, 75%, 79%)
HSB
hsb(44, 33%, 95%)
CMYK
cmyk(0%, 9%, 33%, 5%)
Oklch
oklch(89.9% 0.078 89.7)

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

#5D3F23

Tangerine · DarkOliveGreen · Cinnamon

HEX
#5D3F23
RGB
rgb(93, 63, 35)
HSL
hsl(29, 45%, 25%)
HSB
hsb(29, 62%, 36%)
CMYK
cmyk(0%, 32%, 62%, 64%)
Oklch
oklch(39.5% 0.059 62.7)

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

#3A2716

Tangerine · DarkSlateGray · Cinnamon

HEX
#3A2716
RGB
rgb(58, 39, 22)
HSL
hsl(28, 45%, 16%)
HSB
hsb(28, 62%, 23%)
CMYK
cmyk(0%, 33%, 62%, 77%)
Oklch
oklch(29.1% 0.040 62.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

19404F
4E2818

Analogous

184E42
19404F
18244E

Triadic

19404F
4E183E
3E4E18

Split-Comp.

19404F
4E1824
4E4218

Tetradic

19404F
42184E
4E2818
244E18

Contrast Matrix WCAG 2.1 Contrast

19404F
5F796E
F2DCA2
5D3F23
3A2716
—
2.4
Fail
8.2
AAA
1.2
Fail
1.3
Fail
2.4
Fail
—
3.5
AA Large
2.0
Fail
3.0
AA Large
8.2
AAA
3.5
AA Large
—
7.1
AAA
10.5
AAA
1.2
Fail
2.0
Fail
7.1
AAA
—
1.5
Fail
1.3
Fail
3.0
AA Large
10.5
AAA
1.5
Fail
—
White BG
11.1AAA
4.7AA
1.4Fail
9.5AAA
14.2AAA
Black BG
1.9Fail
4.4AA Large
15.5AAA
2.2Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A4B
6A6A71
E8E8B0
50502A
32321A

Deuteranopia

28254B
696771
EAEBB3
52542B
33341B

Tritanopia

1B4948
607373
F1BBBE
5C2F30
391D1E

Achromatopsia

363636
707070
DCDCDC
454545
2B2B2B

Shades & Tints Shades & Tints

#19404F

Dark
Light

#5F796E

Dark
Light

#F2DCA2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #19404f;
  --color-2: #5f796e;
  --color-3: #f2dca2;
  --color-4: #5d3f23;
  --color-5: #3a2716;
}

SCSS

$color-1: #19404f;
$color-2: #5f796e;
$color-3: #f2dca2;
$color-4: #5d3f23;
$color-5: #3a2716;

TAILWIND

colors: {
  'brand-1': '#19404f',
  'brand-2': '#5f796e',
  'brand-3': '#f2dca2',
  'brand-4': '#5d3f23',
  'brand-5': '#3a2716',
}

RGB Array

[25, 64, 79], [95, 121, 110], [242, 220, 162], [93, 63, 35], [58, 39, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #19404F, #5F796E, #F2DCA2, #5D3F23, #3A2716 is ideal for: tech websites, dark mode UIs, game UIs, 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: #19404f; --color-2: #5f796e; --color-3: #f2dca2; --color-4: #5d3f23; --color-5: #3a2716. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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