← Back to Editor

#FF4649 · #68014E · #34192D · #A53163 · #FD037A

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

Color Details Color Details

#FF4649

Peach Pink · Tomato · Coral Red

HEX
#FF4649
RGB
rgb(255, 70, 73)
HSL
hsl(359, 100%, 64%)
HSB
hsb(359, 73%, 100%)
CMYK
cmyk(0%, 73%, 71%, 0%)
Oklch
oklch(66.6% 0.221 24.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#68014E

Rose Purple · Purple · Eggplant

HEX
#68014E
RGB
rgb(104, 1, 78)
HSL
hsl(315, 98%, 21%)
HSB
hsb(315, 99%, 41%)
CMYK
cmyk(0%, 99%, 25%, 59%)
Oklch
oklch(34.7% 0.148 342.6)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#34192D

Rose Purple · DarkSlateGray · Dark Purple

HEX
#34192D
RGB
rgb(52, 25, 45)
HSL
hsl(316, 35%, 15%)
HSB
hsb(316, 52%, 20%)
CMYK
cmyk(0%, 52%, 13%, 80%)
Oklch
oklch(26.0% 0.053 337.5)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#A53163

Dark Violet · MediumVioletRed · Camellia

HEX
#A53163
RGB
rgb(165, 49, 99)
HSL
hsl(334, 54%, 42%)
HSB
hsb(334, 70%, 65%)
CMYK
cmyk(0%, 70%, 40%, 35%)
Oklch
oklch(50.1% 0.158 358.1)

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

#FD037A

Dark Violet · DeepPink · Camellia

HEX
#FD037A
RGB
rgb(253, 3, 122)
HSL
hsl(331, 98%, 50%)
HSB
hsb(331, 99%, 99%)
CMYK
cmyk(0%, 99%, 52%, 1%)
Oklch
oklch(64.1% 0.257 4.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF4649
47FFFC

Analogous

FF47A6
FF4649
FFA047

Triadic

FF4649
4AFF47
474AFF

Split-Comp.

FF4649
47FFA0
47A6FF

Tetradic

FF4649
A6FF47
47FFFC
A047FF

Contrast Matrix WCAG 2.1 Contrast

FF4649
68014E
34192D
A53163
FD037A
—
3.7
AA Large
4.7
AA
1.9
Fail
1.1
Fail
3.7
AA Large
—
1.3
Fail
1.9
Fail
3.2
AA Large
4.7
AA
1.3
Fail
—
2.4
Fail
4.1
AA Large
1.9
Fail
1.9
Fail
2.4
Fail
—
1.7
Fail
1.1
Fail
3.2
AA Large
4.1
AA Large
1.7
Fail
—
White BG
3.4AA Large
12.3AAA
15.9AAA
6.5AA
3.8AA Large
Black BG
6.2AA
1.7Fail
1.3Fail
3.2AA Large
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAD48
3B3A3B
282828
737257
918F5D

Deuteranopia

BAC848
414937
2A2C27
7A8254
9FB256

Tritanopia

F64848
632D29
332424
9F4D4B
F14641

Achromatopsia

7E7E7E
292929
232323
595959
5B5B5B

Shades & Tints Shades & Tints

#FF4649

Dark
Light

#68014E

Dark
Light

#34192D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff4649;
  --color-2: #68014e;
  --color-3: #34192d;
  --color-4: #a53163;
  --color-5: #fd037a;
}

SCSS

$color-1: #ff4649;
$color-2: #68014e;
$color-3: #34192d;
$color-4: #a53163;
$color-5: #fd037a;

TAILWIND

colors: {
  'brand-1': '#ff4649',
  'brand-2': '#68014e',
  'brand-3': '#34192d',
  'brand-4': '#a53163',
  'brand-5': '#fd037a',
}

RGB Array

[255, 70, 73], [104, 1, 78], [52, 25, 45], [165, 49, 99], [253, 3, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #FF4649, #68014E, #34192D, #A53163, #FD037A 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: #ff4649; --color-2: #68014e; --color-3: #34192d; --color-4: #a53163; --color-5: #fd037a. 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