← Back to Editor

#165447 · #24837D · #7DAEAB · #EDBA85 · #A26C54

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

#165447

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#165447
RGB
rgb(22, 84, 71)
HSL
hsl(167, 58%, 21%)
HSB
hsb(167, 74%, 33%)
CMYK
cmyk(74%, 0%, 15%, 67%)
Oklch
oklch(40.3% 0.066 175.8)

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

#24837D

Mineral Blue · Teal · Mint Ice

HEX
#24837D
RGB
rgb(36, 131, 125)
HSL
hsl(176, 57%, 33%)
HSB
hsb(176, 73%, 51%)
CMYK
cmyk(73%, 0%, 5%, 49%)
Oklch
oklch(55.5% 0.086 188.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#7DAEAB

Mineral Blue · CadetBlue · Lake Green

HEX
#7DAEAB
RGB
rgb(125, 174, 171)
HSL
hsl(176, 23%, 59%)
HSB
hsb(176, 28%, 68%)
CMYK
cmyk(28%, 0%, 2%, 32%)
Oklch
oklch(71.5% 0.052 191.3)

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

#EDBA85

Goose Yellow · BurlyWood · Warm Sun

HEX
#EDBA85
RGB
rgb(237, 186, 133)
HSL
hsl(31, 74%, 73%)
HSB
hsb(31, 44%, 93%)
CMYK
cmyk(0%, 22%, 44%, 7%)
Oklch
oklch(82.3% 0.091 67.1)

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

#A26C54

Tangerine · Sienna · Amber Brown

HEX
#A26C54
RGB
rgb(162, 108, 84)
HSL
hsl(18, 32%, 48%)
HSB
hsb(18, 48%, 64%)
CMYK
cmyk(0%, 33%, 48%, 36%)
Oklch
oklch(58.2% 0.078 44.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

165447
551624

Analogous

165528
165447
164355

Triadic

165447
471655
554716

Split-Comp.

165447
551643
552816

Tetradic

165447
281655
551624
435516

Contrast Matrix WCAG 2.1 Contrast

165447
24837D
7DAEAB
EDBA85
A26C54
—
1.9
Fail
3.6
AA Large
5.0
AA
2.0
Fail
1.9
Fail
—
1.8
Fail
2.6
Fail
1.0
Fail
3.6
AA Large
1.8
Fail
—
1.4
Fail
1.8
Fail
5.0
AA
2.6
Fail
1.4
Fail
—
2.5
Fail
2.0
Fail
1.0
Fail
1.8
Fail
2.5
Fail
—
White BG
8.8AAA
4.5AA
2.5Fail
1.8Fail
4.4AA Large
Black BG
2.4Fail
4.6AA
8.5AAA
12.0AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

31314A
4D4E7E
9293AC
D7D692
8B8A5A

Deuteranopia

2D294B
48417F
8F8CAC
DADE95
8E925B

Tritanopia

194D4D
298080
7FACAC
EA9C9E
9F5E5F

Achromatopsia

404040
666666
9F9F9F
C3C3C3
797979

Shades & Tints Shades & Tints

#165447

Dark
Light

#24837D

Dark
Light

#7DAEAB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #165447;
  --color-2: #24837d;
  --color-3: #7daeab;
  --color-4: #edba85;
  --color-5: #a26c54;
}

SCSS

$color-1: #165447;
$color-2: #24837d;
$color-3: #7daeab;
$color-4: #edba85;
$color-5: #a26c54;

TAILWIND

colors: {
  'brand-1': '#165447',
  'brand-2': '#24837d',
  'brand-3': '#7daeab',
  'brand-4': '#edba85',
  'brand-5': '#a26c54',
}

RGB Array

[22, 84, 71], [36, 131, 125], [125, 174, 171], [237, 186, 133], [162, 108, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #165447, #24837D, #7DAEAB, #EDBA85, #A26C54 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: #165447; --color-2: #24837d; --color-3: #7daeab; --color-4: #edba85; --color-5: #a26c54. 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