← Back to Editor

#555340 · #582DFD · #49250B · #3D4433 · #181303

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

#555340

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#555340
RGB
rgb(85, 83, 64)
HSL
hsl(54, 14%, 29%)
HSB
hsb(54, 25%, 33%)
CMYK
cmyk(0%, 2%, 25%, 67%)
Oklch
oklch(43.8% 0.030 102.5)

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

#582DFD

Deep Indigo · SlateBlue · Navy Blue

HEX
#582DFD
RGB
rgb(88, 45, 253)
HSL
hsl(252, 98%, 58%)
HSB
hsb(252, 82%, 99%)
CMYK
cmyk(65%, 82%, 0%, 1%)
Oklch
oklch(51.2% 0.276 279.8)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#49250B

Tangerine · Maroon · Cinnamon

HEX
#49250B
RGB
rgb(73, 37, 11)
HSL
hsl(25, 74%, 16%)
HSB
hsb(25, 85%, 29%)
CMYK
cmyk(0%, 49%, 85%, 71%)
Oklch
oklch(30.8% 0.066 52.9)

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

#3D4433

Grass Green · DarkSlateGray · Forest Green

HEX
#3D4433
RGB
rgb(61, 68, 51)
HSL
hsl(85, 14%, 23%)
HSB
hsb(85, 25%, 27%)
CMYK
cmyk(10%, 0%, 25%, 73%)
Oklch
oklch(37.5% 0.030 126.0)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#181303

Ochre · Black · Amber Gold

HEX
#181303
RGB
rgb(24, 19, 3)
HSL
hsl(46, 78%, 5%)
HSB
hsb(46, 88%, 9%)
CMYK
cmyk(0%, 21%, 88%, 91%)
Oklch
oklch(18.8% 0.032 93.9)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

555340
404254

Analogous

544840
555340
4C5440

Triadic

555340
405452
524054

Split-Comp.

555340
404C54
484054

Tetradic

555340
405448
404254
54404C

Contrast Matrix WCAG 2.1 Contrast

555340
582DFD
49250B
3D4433
181303
—
1.2
Fail
1.7
Fail
1.3
Fail
2.4
Fail
1.2
Fail
—
2.1
Fail
1.5
Fail
2.8
Fail
1.7
Fail
2.1
Fail
—
1.3
Fail
1.4
Fail
1.3
Fail
1.5
Fail
1.3
Fail
—
1.8
Fail
2.4
Fail
2.8
Fail
1.4
Fail
1.8
Fail
—
White BG
7.8AAA
6.5AA
13.5AAA
10.1AAA
18.5AAA
Black BG
2.7Fail
3.2AA Large
1.6Fail
2.1Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

545445
4545CB
393911
404037
161607

Deuteranopia

545446
484BBF
3C3E13
403F38
161608

Tritanopia

554849
56A39A
471617
3D3A3B
180A0B

Achromatopsia

515151
525252
2D2D2D
404040
131313

Shades & Tints Shades & Tints

#555340

Dark
Light

#582DFD

Dark
Light

#49250B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #555340;
  --color-2: #582dfd;
  --color-3: #49250b;
  --color-4: #3d4433;
  --color-5: #181303;
}

SCSS

$color-1: #555340;
$color-2: #582dfd;
$color-3: #49250b;
$color-4: #3d4433;
$color-5: #181303;

TAILWIND

colors: {
  'brand-1': '#555340',
  'brand-2': '#582dfd',
  'brand-3': '#49250b',
  'brand-4': '#3d4433',
  'brand-5': '#181303',
}

RGB Array

[85, 83, 64], [88, 45, 253], [73, 37, 11], [61, 68, 51], [24, 19, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #555340, #582DFD, #49250B, #3D4433, #181303 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: #555340; --color-2: #582dfd; --color-3: #49250b; --color-4: #3d4433; --color-5: #181303. 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