← Back to Editor

#FF5E84 · #B38686 · #A3A091 · #785B4F · #CF9C78

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF5E84

Peach Pink · LightCoral · Coral Red

HEX
#FF5E84
RGB
rgb(255, 94, 132)
HSL
hsl(346, 100%, 68%)
HSB
hsb(346, 63%, 100%)
CMYK
cmyk(0%, 63%, 48%, 0%)
Oklch
oklch(70.1% 0.197 9.4)

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

#B38686

Peach Pink · DarkGray · Coral Red

HEX
#B38686
RGB
rgb(179, 134, 134)
HSL
hsl(0, 23%, 61%)
HSB
hsb(0, 25%, 70%)
CMYK
cmyk(0%, 25%, 25%, 30%)
Oklch
oklch(66.4% 0.055 18.7)

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

#A3A091

Autumn Sage · DarkGray · Silver Sand

HEX
#A3A091
RGB
rgb(163, 160, 145)
HSL
hsl(50, 9%, 60%)
HSB
hsb(50, 11%, 64%)
CMYK
cmyk(0%, 2%, 11%, 36%)
Oklch
oklch(70.4% 0.022 97.6)

Traditional「Autumn Sage」· Paint「Silver Sand」· Creative Urban Concrete

#785B4F

Tangerine · DimGray · Amber Brown

HEX
#785B4F
RGB
rgb(120, 91, 79)
HSL
hsl(18, 21%, 39%)
HSB
hsb(18, 34%, 47%)
CMYK
cmyk(0%, 24%, 34%, 53%)
Oklch
oklch(49.8% 0.043 43.5)

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

#CF9C78

Apricot · DarkSalmon · Warm Sun

HEX
#CF9C78
RGB
rgb(207, 156, 120)
HSL
hsl(25, 48%, 64%)
HSB
hsb(25, 42%, 81%)
CMYK
cmyk(0%, 25%, 42%, 19%)
Oklch
oklch(73.2% 0.078 56.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF5E84
5CFFD9

Analogous

FF5CD3
FF5E84
FF875C

Triadic

FF5E84
82FF5C
5C82FF

Split-Comp.

FF5E84
5CFF87
5CD3FF

Tetradic

FF5E84
D3FF5C
5CFFD9
875CFF

Contrast Matrix WCAG 2.1 Contrast

FF5E84
B38686
A3A091
785B4F
CF9C78
—
1.1
Fail
1.1
Fail
2.1
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
2.0
Fail
1.3
Fail
1.1
Fail
1.2
Fail
—
2.3
Fail
1.1
Fail
2.1
Fail
2.0
Fail
2.3
Fail
—
2.5
Fail
1.2
Fail
1.3
Fail
1.1
Fail
2.5
Fail
—
White BG
2.9Fail
3.1AA Large
2.6Fail
6.2AA
2.4Fail
Black BG
7.2AAA
6.7AA
8.0AAA
3.4AA Large
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B87B
A09F86
A2A295
6B6B52
B9B881

Deuteranopia

C3CF79
A2A686
A2A296
6D6F53
BCC083

Tritanopia

F77472
B18686
A39798
775455
CC8889

Achromatopsia

929292
939393
9F9F9F
626262
A7A7A7

Shades & Tints Shades & Tints

#FF5E84

Dark
Light

#B38686

Dark
Light

#A3A091

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff5e84;
  --color-2: #b38686;
  --color-3: #a3a091;
  --color-4: #785b4f;
  --color-5: #cf9c78;
}

SCSS

$color-1: #ff5e84;
$color-2: #b38686;
$color-3: #a3a091;
$color-4: #785b4f;
$color-5: #cf9c78;

TAILWIND

colors: {
  'brand-1': '#ff5e84',
  'brand-2': '#b38686',
  'brand-3': '#a3a091',
  'brand-4': '#785b4f',
  'brand-5': '#cf9c78',
}

RGB Array

[255, 94, 132], [179, 134, 134], [163, 160, 145], [120, 91, 79], [207, 156, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF5E84, #B38686, #A3A091, #785B4F, #CF9C78 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ff5e84; --color-2: #b38686; --color-3: #a3a091; --color-4: #785b4f; --color-5: #cf9c78. 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. 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 tech, SaaS, healthcare, eco industries. 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