← Back to Editor

#FA2302 · #5D3726 · #FA7F05 · #403522 · #B4EB00

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

#FA2302

Vermilion · OrangeRed · Passion Red

HEX
#FA2302
RGB
rgb(250, 35, 2)
HSL
hsl(8, 98%, 49%)
HSB
hsb(8, 99%, 98%)
CMYK
cmyk(0%, 86%, 99%, 2%)
Oklch
oklch(62.8% 0.245 30.9)

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

#5D3726

Tangerine · DarkOliveGreen · Amber Brown

HEX
#5D3726
RGB
rgb(93, 55, 38)
HSL
hsl(19, 42%, 26%)
HSB
hsb(19, 59%, 36%)
CMYK
cmyk(0%, 41%, 59%, 64%)
Oklch
oklch(37.9% 0.061 44.6)

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

#FA7F05

Ochre · Orange · Amber Brown

HEX
#FA7F05
RGB
rgb(250, 127, 5)
HSL
hsl(30, 96%, 50%)
HSB
hsb(30, 98%, 98%)
CMYK
cmyk(0%, 49%, 98%, 2%)
Oklch
oklch(72.4% 0.182 53.4)

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

#403522

Ochre · DarkSlateGray · Cinnamon

HEX
#403522
RGB
rgb(64, 53, 34)
HSL
hsl(38, 31%, 19%)
HSB
hsb(38, 47%, 25%)
CMYK
cmyk(0%, 17%, 47%, 75%)
Oklch
oklch(33.5% 0.034 80.8)

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

#B4EB00

Grass Green · GreenYellow · Olive Green

HEX
#B4EB00
RGB
rgb(180, 235, 0)
HSL
hsl(74, 100%, 46%)
HSB
hsb(74, 100%, 92%)
CMYK
cmyk(23%, 0%, 100%, 8%)
Oklch
oklch(87.0% 0.218 124.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA2302
02D7F7

Analogous

F7025C
FA2302
F79E02

Triadic

FA2302
02F723
2302F7

Split-Comp.

FA2302
02F79E
025CF7

Tetradic

FA2302
5CF702
02D7F7
9E02F7

Contrast Matrix WCAG 2.1 Contrast

FA2302
5D3726
FA7F05
403522
B4EB00
—
2.6
Fail
1.5
Fail
3.0
AA Large
2.8
Fail
2.6
Fail
—
4.0
AA Large
1.2
Fail
7.3
AAA
1.5
Fail
4.0
AA Large
—
4.6
AA
1.8
Fail
3.0
AA Large
1.2
Fail
4.6
AA
—
8.5
AAA
2.8
Fail
7.3
AAA
1.8
Fail
8.5
AAA
—
White BG
4.0AA Large
10.3AAA
2.6Fail
12.0AAA
1.4Fail
Black BG
5.3AA
2.0Fail
8.1AAA
1.8Fail
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9B0A
4D4C2A
C5C423
3B3B27
CCCC39

Deuteranopia

A9BA0C
4F522B
CCD52A
3C3D28
C9C547

Tritanopia

EF1012
5B2D2E
F43A3F
3F2A2B
B76670

Achromatopsia

606060
404040
969696
363636
C0C0C0

Shades & Tints Shades & Tints

#FA2302

Dark
Light

#5D3726

Dark
Light

#FA7F05

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa2302;
  --color-2: #5d3726;
  --color-3: #fa7f05;
  --color-4: #403522;
  --color-5: #b4eb00;
}

SCSS

$color-1: #fa2302;
$color-2: #5d3726;
$color-3: #fa7f05;
$color-4: #403522;
$color-5: #b4eb00;

TAILWIND

colors: {
  'brand-1': '#fa2302',
  'brand-2': '#5d3726',
  'brand-3': '#fa7f05',
  'brand-4': '#403522',
  'brand-5': '#b4eb00',
}

RGB Array

[250, 35, 2], [93, 55, 38], [250, 127, 5], [64, 53, 34], [180, 235, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #FA2302, #5D3726, #FA7F05, #403522, #B4EB00 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: #fa2302; --color-2: #5d3726; --color-3: #fa7f05; --color-4: #403522; --color-5: #b4eb00. 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