← Back to Editor

#727504 · #E98168 · #EB450E · #5E3830 · #305E54

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

#727504

Autumn Sage · Olive · Amber Gold

HEX
#727504
RGB
rgb(114, 117, 4)
HSL
hsl(62, 93%, 24%)
HSB
hsb(62, 97%, 46%)
CMYK
cmyk(3%, 0%, 97%, 54%)
Oklch
oklch(54.2% 0.118 111.5)

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

#E98168

Peach Pink · Salmon · Coral Red

HEX
#E98168
RGB
rgb(233, 129, 104)
HSL
hsl(12, 75%, 66%)
HSB
hsb(12, 55%, 91%)
CMYK
cmyk(0%, 45%, 55%, 9%)
Oklch
oklch(71.2% 0.134 34.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#EB450E

Tangerine · OrangeRed · Amber Brown

HEX
#EB450E
RGB
rgb(235, 69, 14)
HSL
hsl(15, 89%, 49%)
HSB
hsb(15, 94%, 92%)
CMYK
cmyk(0%, 71%, 94%, 8%)
Oklch
oklch(62.7% 0.210 35.8)

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

#5E3830

Crimson · DarkOliveGreen · Wine Red

HEX
#5E3830
RGB
rgb(94, 56, 48)
HSL
hsl(10, 32%, 28%)
HSB
hsb(10, 49%, 37%)
CMYK
cmyk(0%, 40%, 49%, 63%)
Oklch
oklch(38.4% 0.056 32.6)

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

#305E54

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#305E54
RGB
rgb(48, 94, 84)
HSL
hsl(167, 32%, 28%)
HSB
hsb(167, 49%, 37%)
CMYK
cmyk(49%, 0%, 11%, 63%)
Oklch
oklch(44.6% 0.054 177.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

727504
080476

Analogous

764104
727504
397604

Triadic

727504
047276
760472

Split-Comp.

727504
043976
410476

Tetradic

727504
047641
080476
760439

Contrast Matrix WCAG 2.1 Contrast

727504
E98168
EB450E
5E3830
305E54
—
1.8
Fail
1.3
Fail
2.0
Fail
1.5
Fail
1.8
Fail
—
1.4
Fail
3.7
AA Large
2.7
Fail
1.3
Fail
1.4
Fail
—
2.6
Fail
1.9
Fail
2.0
Fail
3.7
AA Large
2.6
Fail
—
1.4
Fail
1.5
Fail
2.7
Fail
1.9
Fail
1.4
Fail
—
White BG
4.9AA
2.7Fail
3.9AA Large
10.1AAA
7.4AAA
Black BG
4.3AA Large
7.8AAA
5.4AA
2.1Fail
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

73731F
BCBB6E
A3A21B
4E4D32
444456

Deuteranopia

737326
C2CA70
ADB91F
505332
413E57

Tritanopia

72353A
E47374
E32628
5C3334
325859

Achromatopsia

676767
9D9D9D
707070
424242
4F4F4F

Shades & Tints Shades & Tints

#727504

Dark
Light

#E98168

Dark
Light

#EB450E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #727504;
  --color-2: #e98168;
  --color-3: #eb450e;
  --color-4: #5e3830;
  --color-5: #305e54;
}

SCSS

$color-1: #727504;
$color-2: #e98168;
$color-3: #eb450e;
$color-4: #5e3830;
$color-5: #305e54;

TAILWIND

colors: {
  'brand-1': '#727504',
  'brand-2': '#e98168',
  'brand-3': '#eb450e',
  'brand-4': '#5e3830',
  'brand-5': '#305e54',
}

RGB Array

[114, 117, 4], [233, 129, 104], [235, 69, 14], [94, 56, 48], [48, 94, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #727504, #E98168, #EB450E, #5E3830, #305E54 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: #727504; --color-2: #e98168; --color-3: #eb450e; --color-4: #5e3830; --color-5: #305e54. 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