← Back to Editor

#FF3D08 · #706E38 · #248C5C · #0F3438 · #1A0108

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

Color Details Color Details

#FF3D08

Vermilion · OrangeRed · Passion Red

HEX
#FF3D08
RGB
rgb(255, 61, 8)
HSL
hsl(13, 100%, 52%)
HSB
hsb(13, 97%, 100%)
CMYK
cmyk(0%, 76%, 97%, 0%)
Oklch
oklch(65.4% 0.234 33.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#706E38

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#706E38
RGB
rgb(112, 110, 56)
HSL
hsl(58, 33%, 33%)
HSB
hsb(58, 50%, 44%)
CMYK
cmyk(0%, 2%, 50%, 56%)
Oklch
oklch(52.7% 0.075 106.8)

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

#248C5C

Mineral Blue · SeaGreen · Forest Green

HEX
#248C5C
RGB
rgb(36, 140, 92)
HSL
hsl(152, 59%, 35%)
HSB
hsb(152, 74%, 55%)
CMYK
cmyk(74%, 0%, 34%, 45%)
Oklch
oklch(57.0% 0.119 158.3)

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

#0F3438

Lake Blue · DarkSlateGray · Peacock Green

HEX
#0F3438
RGB
rgb(15, 52, 56)
HSL
hsl(186, 58%, 14%)
HSB
hsb(186, 73%, 22%)
CMYK
cmyk(73%, 7%, 0%, 78%)
Oklch
oklch(30.1% 0.042 205.2)

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

#1A0108

Dark Violet · Black · Raspberry

HEX
#1A0108
RGB
rgb(26, 1, 8)
HSL
hsl(343, 93%, 5%)
HSB
hsb(343, 96%, 10%)
CMYK
cmyk(0%, 96%, 69%, 90%)
Oklch
oklch(14.4% 0.053 2.8)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF3D08
0ACAFF

Analogous

FF0A50
FF3D08
FFBA0A

Triadic

FF3D08
0AFF3F
3F0AFF

Split-Comp.

FF3D08
0AFFBA
0A50FF

Tetradic

FF3D08
50FF0A
0ACAFF
BA0AFF

Contrast Matrix WCAG 2.1 Contrast

FF3D08
706E38
248C5C
0F3438
1A0108
—
1.5
Fail
1.2
Fail
3.8
AA Large
5.6
AA
1.5
Fail
—
1.3
Fail
2.5
Fail
3.8
AA Large
1.2
Fail
1.3
Fail
—
3.2
AA Large
4.7
AA
3.8
AA Large
2.5
Fail
3.2
AA Large
—
1.5
Fail
5.6
AA
3.8
AA Large
4.7
AA
1.5
Fail
—
White BG
3.5AA Large
5.3AA
4.2AA Large
13.4AAA
20.0AAA
Black BG
5.9AA
4.0AA Large
5.0AA
1.6Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABA915
6F6F45
515268
1F1F37
0F0F06

Deuteranopia

B6C518
6F6F48
4B436A
1D1A37
111306

Tritanopia

F51F21
704F52
297173
113636
190505

Achromatopsia

717171
686868
676767
292929
090909

Shades & Tints Shades & Tints

#FF3D08

Dark
Light

#706E38

Dark
Light

#248C5C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff3d08;
  --color-2: #706e38;
  --color-3: #248c5c;
  --color-4: #0f3438;
  --color-5: #1a0108;
}

SCSS

$color-1: #ff3d08;
$color-2: #706e38;
$color-3: #248c5c;
$color-4: #0f3438;
$color-5: #1a0108;

TAILWIND

colors: {
  'brand-1': '#ff3d08',
  'brand-2': '#706e38',
  'brand-3': '#248c5c',
  'brand-4': '#0f3438',
  'brand-5': '#1a0108',
}

RGB Array

[255, 61, 8], [112, 110, 56], [36, 140, 92], [15, 52, 56], [26, 1, 8]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #FF3D08, #706E38, #248C5C, #0F3438, #1A0108 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: #ff3d08; --color-2: #706e38; --color-3: #248c5c; --color-4: #0f3438; --color-5: #1a0108. 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