← Back to Editor

#F07B06 · #F94E03 · #CC0000 · #4F4C2D · #2C2C1C

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 App

Color Details Color Details

#F07B06

Ochre · Chocolate · Amber Brown

HEX
#F07B06
RGB
rgb(240, 123, 6)
HSL
hsl(30, 95%, 48%)
HSB
hsb(30, 98%, 94%)
CMYK
cmyk(0%, 49%, 98%, 6%)
Oklch
oklch(70.4% 0.175 54.0)

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

#F94E03

Tangerine · OrangeRed · Amber Brown

HEX
#F94E03
RGB
rgb(249, 78, 3)
HSL
hsl(18, 98%, 49%)
HSB
hsb(18, 99%, 98%)
CMYK
cmyk(0%, 69%, 99%, 2%)
Oklch
oklch(65.9% 0.217 37.5)

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

#CC0000

Vermilion · Red · Wine Red

HEX
#CC0000
RGB
rgb(204, 0, 0)
HSL
hsl(0, 100%, 40%)
HSB
hsb(0, 100%, 80%)
CMYK
cmyk(0%, 100%, 100%, 20%)
Oklch
oklch(53.1% 0.218 29.2)

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

#4F4C2D

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#4F4C2D
RGB
rgb(79, 76, 45)
HSL
hsl(55, 27%, 24%)
HSB
hsb(55, 43%, 31%)
CMYK
cmyk(0%, 4%, 43%, 69%)
Oklch
oklch(41.1% 0.047 103.5)

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

#2C2C1C

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#2C2C1C
RGB
rgb(44, 44, 28)
HSL
hsl(60, 22%, 14%)
HSB
hsb(60, 36%, 17%)
CMYK
cmyk(0%, 0%, 36%, 83%)
Oklch
oklch(28.8% 0.027 108.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F07B06
067AEF

Analogous

EF0606
F07B06
EFEF06

Triadic

F07B06
06EF7A
7A06EF

Split-Comp.

F07B06
06EFEF
0606EF

Tetradic

F07B06
06EF06
067AEF
EF06EF

Contrast Matrix WCAG 2.1 Contrast

F07B06
F94E03
CC0000
4F4C2D
2C2C1C
—
1.2
Fail
2.1
Fail
3.1
AA Large
5.1
AA
1.2
Fail
—
1.7
Fail
2.5
Fail
4.1
AA Large
2.1
Fail
1.7
Fail
—
1.5
Fail
2.4
Fail
3.1
AA Large
2.5
Fail
1.5
Fail
—
1.6
Fail
5.1
AA
4.1
AA Large
2.4
Fail
1.6
Fail
—
White BG
2.8Fail
3.4AA Large
5.9AA
8.7AAA
14.1AAA
Black BG
7.5AAA
6.1AA
3.6AA Large
2.4Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBC22
AFAD15
747200
4E4E35
2C2C20

Deuteranopia

C4CD29
B9C61A
808F00
4E4E36
2C2C21

Tritanopia

EA393E
F02327
C20000
4F3A3C
2C2324

Achromatopsia

919191
797979
3D3D3D
494949
2A2A2A

Shades & Tints Shades & Tints

#F07B06

Dark
Light

#F94E03

Dark
Light

#CC0000

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f07b06;
  --color-2: #f94e03;
  --color-3: #cc0000;
  --color-4: #4f4c2d;
  --color-5: #2c2c1c;
}

SCSS

$color-1: #f07b06;
$color-2: #f94e03;
$color-3: #cc0000;
$color-4: #4f4c2d;
$color-5: #2c2c1c;

TAILWIND

colors: {
  'brand-1': '#f07b06',
  'brand-2': '#f94e03',
  'brand-3': '#cc0000',
  'brand-4': '#4f4c2d',
  'brand-5': '#2c2c1c',
}

RGB Array

[240, 123, 6], [249, 78, 3], [204, 0, 0], [79, 76, 45], [44, 44, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #F07B06, #F94E03, #CC0000, #4F4C2D, #2C2C1C 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: #f07b06; --color-2: #f94e03; --color-3: #cc0000; --color-4: #4f4c2d; --color-5: #2c2c1c. 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