← Back to Editor

#242424 · #A35407 · #F8A000 · #3C616A · #003344

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#242424

Ink Black · DarkSlateGray · Dark Stone

HEX
#242424
RGB
rgb(36, 36, 36)
HSL
hsl(0, 0%, 14%)
HSB
hsb(0, 0%, 14%)
CMYK
cmyk(0%, 0%, 0%, 86%)
Oklch
oklch(26.0% 0.000 89.9)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#A35407

Ochre · Sienna · Amber Brown

HEX
#A35407
RGB
rgb(163, 84, 7)
HSL
hsl(30, 92%, 33%)
HSB
hsb(30, 96%, 64%)
CMYK
cmyk(0%, 48%, 96%, 36%)
Oklch
oklch(53.2% 0.129 55.1)

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

#F8A000

Ochre · Orange · Amber Brown

HEX
#F8A000
RGB
rgb(248, 160, 0)
HSL
hsl(39, 100%, 49%)
HSB
hsb(39, 100%, 97%)
CMYK
cmyk(0%, 35%, 100%, 3%)
Oklch
oklch(77.6% 0.168 70.5)

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

#3C616A

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3C616A
RGB
rgb(60, 97, 106)
HSL
hsl(192, 28%, 33%)
HSB
hsb(192, 43%, 42%)
CMYK
cmyk(43%, 8%, 0%, 58%)
Oklch
oklch(46.8% 0.045 214.8)

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

#003344

Lake Blue · DarkSlateGray · Peacock Green

HEX
#003344
RGB
rgb(0, 51, 68)
HSL
hsl(195, 100%, 13%)
HSB
hsb(195, 100%, 27%)
CMYK
cmyk(100%, 25%, 0%, 73%)
Oklch
oklch(29.9% 0.058 227.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

242424
242424

Analogous

242424
242424
242424

Triadic

242424
242424
242424

Split-Comp.

242424
242424
242424

Tetradic

242424
242424
242424
242424

Contrast Matrix WCAG 2.1 Contrast

242424
A35407
F8A000
3C616A
003344
—
2.8
Fail
7.4
AAA
2.3
Fail
1.2
Fail
2.8
Fail
—
2.6
Fail
1.2
Fail
2.5
Fail
7.4
AAA
2.6
Fail
—
3.2
AA Large
6.4
AA
2.3
Fail
1.2
Fail
3.2
AA Large
—
2.0
Fail
1.2
Fail
2.5
Fail
6.4
AA
2.0
Fail
—
White BG
15.5AAA
5.5AA
2.1Fail
6.8AA
13.5AAA
Black BG
1.4Fail
3.8AA Large
10.0AAA
3.1AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

242424
81801A
D2D127
4C4C68
161740

Deuteranopia

242424
858B1E
D7DE30
4A4767
130F3F

Tritanopia

242424
9F282C
F4454C
3E6666
033D3C

Achromatopsia

242424
636363
A8A8A8
575757
262626

Shades & Tints Shades & Tints

#242424

Dark
Light

#A35407

Dark
Light

#F8A000

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #242424;
  --color-2: #a35407;
  --color-3: #f8a000;
  --color-4: #3c616a;
  --color-5: #003344;
}

SCSS

$color-1: #242424;
$color-2: #a35407;
$color-3: #f8a000;
$color-4: #3c616a;
$color-5: #003344;

TAILWIND

colors: {
  'brand-1': '#242424',
  'brand-2': '#a35407',
  'brand-3': '#f8a000',
  'brand-4': '#3c616a',
  'brand-5': '#003344',
}

RGB Array

[36, 36, 36], [163, 84, 7], [248, 160, 0], [60, 97, 106], [0, 51, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #242424, #A35407, #F8A000, #3C616A, #003344 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. 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: #242424; --color-2: #a35407; --color-3: #f8a000; --color-4: #3c616a; --color-5: #003344. 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. 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