← Back to Editor

#F64758 · #4A4A40 · #808021 · #ED8842 · #F5D099

A 5-color palette 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

#F64758

Peach Pink · Tomato · Coral Red

HEX
#F64758
RGB
rgb(246, 71, 88)
HSL
hsl(354, 91%, 62%)
HSB
hsb(354, 71%, 96%)
CMYK
cmyk(0%, 71%, 64%, 4%)
Oklch
oklch(65.4% 0.210 20.0)

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

#4A4A40

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4A4A40
RGB
rgb(74, 74, 64)
HSL
hsl(60, 7%, 27%)
HSB
hsb(60, 14%, 29%)
CMYK
cmyk(0%, 0%, 14%, 71%)
Oklch
oklch(40.6% 0.016 107.1)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#808021

Autumn Sage · Olive · Honey Gold

HEX
#808021
RGB
rgb(128, 128, 33)
HSL
hsl(60, 59%, 32%)
HSB
hsb(60, 74%, 50%)
CMYK
cmyk(0%, 0%, 74%, 50%)
Oklch
oklch(58.2% 0.113 109.5)

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

#ED8842

Tangerine · Coral · Warm Sun

HEX
#ED8842
RGB
rgb(237, 136, 66)
HSL
hsl(25, 83%, 59%)
HSB
hsb(25, 72%, 93%)
CMYK
cmyk(0%, 43%, 72%, 7%)
Oklch
oklch(72.4% 0.149 52.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#F5D099

Goose Yellow · Khaki · Peach Orange

HEX
#F5D099
RGB
rgb(245, 208, 153)
HSL
hsl(36, 82%, 78%)
HSB
hsb(36, 38%, 96%)
CMYK
cmyk(0%, 15%, 38%, 4%)
Oklch
oklch(87.6% 0.082 77.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F64758
46F6E5

Analogous

F646B0
F64758
F68C46

Triadic

F64758
58F646
4658F6

Split-Comp.

F64758
46F68C
46B0F6

Tetradic

F64758
B0F646
46F6E5
8C46F6

Contrast Matrix WCAG 2.1 Contrast

F64758
4A4A40
808021
ED8842
F5D099
—
2.5
Fail
1.2
Fail
1.4
Fail
2.4
Fail
2.5
Fail
—
2.1
Fail
3.5
AA Large
6.1
AA
1.2
Fail
2.1
Fail
—
1.6
Fail
2.9
Fail
1.4
Fail
3.5
AA Large
1.6
Fail
—
1.8
Fail
2.4
Fail
6.1
AA
2.9
Fail
1.8
Fail
—
White BG
3.5AA Large
9.0AAA
4.2AA Large
2.6Fail
1.5Fail
Black BG
6.0AA
2.3Fail
5.0AA
8.2AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA954
4A4A42
808038
C1C053
E5E5A6

Deuteranopia

B4C253
4A4A43
80803E
C7CF57
E7EAAA

Tritanopia

ED5150
4A4445
804A4E
E86063
F3B1B3

Achromatopsia

7D7D7D
494949
757575
9E9E9E
D5D5D5

Shades & Tints Shades & Tints

#F64758

Dark
Light

#4A4A40

Dark
Light

#808021

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f64758;
  --color-2: #4a4a40;
  --color-3: #808021;
  --color-4: #ed8842;
  --color-5: #f5d099;
}

SCSS

$color-1: #f64758;
$color-2: #4a4a40;
$color-3: #808021;
$color-4: #ed8842;
$color-5: #f5d099;

TAILWIND

colors: {
  'brand-1': '#f64758',
  'brand-2': '#4a4a40',
  'brand-3': '#808021',
  'brand-4': '#ed8842',
  'brand-5': '#f5d099',
}

RGB Array

[246, 71, 88], [74, 74, 64], [128, 128, 33], [237, 136, 66], [245, 208, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F64758, #4A4A40, #808021, #ED8842, #F5D099 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #f64758; --color-2: #4a4a40; --color-3: #808021; --color-4: #ed8842; --color-5: #f5d099. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 general-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