← Back to Editor

#330A02 · #5C3817 · #85662B · #AD9440 · #D6C254

coffee

A 5-color coffee palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#330A02

Vermilion · Black · Deep Berry

HEX
#330A02
RGB
rgb(51, 10, 2)
HSL
hsl(10, 92%, 10%)
HSB
hsb(10, 96%, 20%)
CMYK
cmyk(0%, 80%, 96%, 80%)
Oklch
oklch(21.8% 0.069 35.7)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#5C3817

Tangerine · DarkOliveGreen · Cinnamon

HEX
#5C3817
RGB
rgb(92, 56, 23)
HSL
hsl(29, 60%, 23%)
HSB
hsb(29, 75%, 36%)
CMYK
cmyk(0%, 39%, 75%, 64%)
Oklch
oklch(37.7% 0.069 60.5)

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

#85662B

Ochre · Sienna · Amber Brown

HEX
#85662B
RGB
rgb(133, 102, 43)
HSL
hsl(39, 51%, 35%)
HSB
hsb(39, 68%, 52%)
CMYK
cmyk(0%, 23%, 68%, 48%)
Oklch
oklch(52.9% 0.086 81.0)

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

#AD9440

Ochre · DarkGoldenRod · Honey Gold

HEX
#AD9440
RGB
rgb(173, 148, 64)
HSL
hsl(46, 46%, 46%)
HSB
hsb(46, 63%, 68%)
CMYK
cmyk(0%, 14%, 63%, 32%)
Oklch
oklch(67.2% 0.107 92.7)

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

#D6C254

Autumn Sage · SandyBrown · Sunflower

HEX
#D6C254
RGB
rgb(214, 194, 84)
HSL
hsl(51, 61%, 58%)
HSB
hsb(51, 61%, 84%)
CMYK
cmyk(0%, 9%, 61%, 16%)
Oklch
oklch(81.0% 0.131 99.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

330A02
022931

Analogous

310212
330A02
312102

Triadic

330A02
02310A
0A0231

Split-Comp.

330A02
023121
021231

Tetradic

330A02
123102
022931
210231

Contrast Matrix WCAG 2.1 Contrast

330A02
5C3817
85662B
AD9440
D6C254
—
1.7
Fail
3.3
AA Large
6.0
AA
9.9
AAA
1.7
Fail
—
1.9
Fail
3.5
AA Large
5.8
AA
3.3
AA Large
1.9
Fail
—
1.8
Fail
3.0
Fail
6.0
AA
3.5
AA Large
1.8
Fail
—
1.7
Fail
9.9
AAA
5.8
AA
3.0
Fail
1.7
Fail
—
White BG
17.7AAA
10.3AAA
5.3AA
3.0Fail
1.8Fail
Black BG
1.2Fail
2.0Fail
3.9AA Large
7.1AAA
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

212104
4C4C1F
787739
A2A254
CDCD6F

Deuteranopia

242704
4F5121
797C3D
A4A659
CFD075

Tritanopia

310506
5A2527
834547
AC6468
D58488

Achromatopsia

151515
3F3F3F
696969
929292
BBBBBB

Shades & Tints Shades & Tints

#330A02

Dark
Light

#5C3817

Dark
Light

#85662B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #330a02;
  --color-2: #5c3817;
  --color-3: #85662b;
  --color-4: #ad9440;
  --color-5: #d6c254;
}

SCSS

$color-1: #330a02;
$color-2: #5c3817;
$color-3: #85662b;
$color-4: #ad9440;
$color-5: #d6c254;

TAILWIND

colors: {
  'brand-1': '#330a02',
  'brand-2': '#5c3817',
  'brand-3': '#85662b',
  'brand-4': '#ad9440',
  'brand-5': '#d6c254',
}

RGB Array

[51, 10, 2], [92, 56, 23], [133, 102, 43], [173, 148, 64], [214, 194, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #330A02, #5C3817, #85662B, #AD9440, #D6C254 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #330a02; --color-2: #5c3817; --color-3: #85662b; --color-4: #ad9440; --color-5: #d6c254. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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