← Back to Editor

#853E5E · #B04668 · #F77F6D · #FFB587 · #F7D29E

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

#853E5E

Dark Violet · DimGray · Camellia

HEX
#853E5E
RGB
rgb(133, 62, 94)
HSL
hsl(333, 36%, 38%)
HSB
hsb(333, 53%, 52%)
CMYK
cmyk(0%, 53%, 29%, 48%)
Oklch
oklch(46.6% 0.104 353.6)

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

#B04668

Dark Violet · MediumVioletRed · Camellia

HEX
#B04668
RGB
rgb(176, 70, 104)
HSL
hsl(341, 43%, 48%)
HSB
hsb(341, 60%, 69%)
CMYK
cmyk(0%, 60%, 41%, 31%)
Oklch
oklch(54.5% 0.142 3.0)

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

#F77F6D

Peach Pink · Salmon · Coral Red

HEX
#F77F6D
RGB
rgb(247, 127, 109)
HSL
hsl(8, 90%, 70%)
HSB
hsb(8, 56%, 97%)
CMYK
cmyk(0%, 49%, 56%, 3%)
Oklch
oklch(72.9% 0.150 30.0)

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

#FFB587

Apricot · LightSalmon · Peach Orange

HEX
#FFB587
RGB
rgb(255, 181, 135)
HSL
hsl(23, 100%, 76%)
HSB
hsb(23, 47%, 100%)
CMYK
cmyk(0%, 29%, 47%, 0%)
Oklch
oklch(83.3% 0.106 52.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F7D29E

Goose Yellow · Wheat · Peach Orange

HEX
#F7D29E
RGB
rgb(247, 210, 158)
HSL
hsl(35, 85%, 79%)
HSB
hsb(35, 36%, 97%)
CMYK
cmyk(0%, 15%, 36%, 3%)
Oklch
oklch(88.3% 0.079 75.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

853E5E
3E8464

Analogous

843E80
853E5E
84423E

Triadic

853E5E
5D843E
3E5D84

Split-Comp.

853E5E
3E8442
3E8084

Tetradic

853E5E
80843E
3E8464
423E84

Contrast Matrix WCAG 2.1 Contrast

853E5E
B04668
F77F6D
FFB587
F7D29E
—
1.4
Fail
2.9
Fail
4.3
AA Large
5.2
AA
1.4
Fail
—
2.1
Fail
3.1
AA Large
3.7
AA Large
2.9
Fail
2.1
Fail
—
1.5
Fail
1.8
Fail
4.3
AA Large
3.1
AA Large
1.5
Fail
—
1.2
Fail
5.2
AA
3.7
AA Large
1.8
Fail
1.2
Fail
—
White BG
7.4AAA
5.4AA
2.6Fail
1.7Fail
1.4Fail
Black BG
2.8Fail
3.9AA Large
8.2AAA
12.2AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

666656
828160
C3C271
DFDE92
E7E7AB

Deuteranopia

6A7054
88905E
CAD372
E3E995
E9ECAE

Tritanopia

81504F
AB5958
F17576
FB9B9D
F5B5B7

Achromatopsia

575757
6A6A6A
A1A1A1
C6C6C6
D7D7D7

Shades & Tints Shades & Tints

#853E5E

Dark
Light

#B04668

Dark
Light

#F77F6D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #853e5e;
  --color-2: #b04668;
  --color-3: #f77f6d;
  --color-4: #ffb587;
  --color-5: #f7d29e;
}

SCSS

$color-1: #853e5e;
$color-2: #b04668;
$color-3: #f77f6d;
$color-4: #ffb587;
$color-5: #f7d29e;

TAILWIND

colors: {
  'brand-1': '#853e5e',
  'brand-2': '#b04668',
  'brand-3': '#f77f6d',
  'brand-4': '#ffb587',
  'brand-5': '#f7d29e',
}

RGB Array

[133, 62, 94], [176, 70, 104], [247, 127, 109], [255, 181, 135], [247, 210, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #853E5E, #B04668, #F77F6D, #FFB587, #F7D29E 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: #853e5e; --color-2: #b04668; --color-3: #f77f6d; --color-4: #ffb587; --color-5: #f7d29e. 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