← Back to Editor

#7D7285 · #B86D78 · #FB726E · #E5A778 · #DED290

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

#7D7285

Dark Plum · Gray · Warm Gray

HEX
#7D7285
RGB
rgb(125, 114, 133)
HSL
hsl(275, 8%, 48%)
HSB
hsb(275, 14%, 52%)
CMYK
cmyk(6%, 14%, 0%, 48%)
Oklch
oklch(56.9% 0.032 311.1)

Traditional「Dark Plum」· Paint「Warm Gray」· Creative Urban Concrete

#B86D78

Crimson · Gray · Passion Red

HEX
#B86D78
RGB
rgb(184, 109, 120)
HSL
hsl(351, 35%, 57%)
HSB
hsb(351, 41%, 72%)
CMYK
cmyk(0%, 41%, 35%, 28%)
Oklch
oklch(62.0% 0.096 10.8)

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

#FB726E

Peach Pink · Salmon · Coral Red

HEX
#FB726E
RGB
rgb(251, 114, 110)
HSL
hsl(2, 95%, 71%)
HSB
hsb(2, 56%, 98%)
CMYK
cmyk(0%, 55%, 56%, 2%)
Oklch
oklch(71.6% 0.169 23.9)

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

#E5A778

Apricot · DarkSalmon · Warm Sun

HEX
#E5A778
RGB
rgb(229, 167, 120)
HSL
hsl(26, 68%, 68%)
HSB
hsb(26, 48%, 90%)
CMYK
cmyk(0%, 27%, 48%, 10%)
Oklch
oklch(77.6% 0.096 57.9)

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

#DED290

Fresh Green · Khaki · Sunflower

HEX
#DED290
RGB
rgb(222, 210, 144)
HSL
hsl(51, 54%, 72%)
HSB
hsb(51, 35%, 87%)
CMYK
cmyk(0%, 5%, 35%, 13%)
Oklch
oklch(85.8% 0.086 99.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D7285
798471

Analogous

727184
7D7285
847183

Triadic

7D7285
847C71
71847C

Split-Comp.

7D7285
838471
718472

Tetradic

7D7285
847271
798471
718384

Contrast Matrix WCAG 2.1 Contrast

7D7285
B86D78
FB726E
E5A778
DED290
—
1.2
Fail
1.7
Fail
2.2
Fail
3.0
Fail
1.2
Fail
—
1.4
Fail
1.8
Fail
2.5
Fail
1.7
Fail
1.4
Fail
—
1.3
Fail
1.8
Fail
2.2
Fail
1.8
Fail
1.3
Fail
—
1.4
Fail
3.0
Fail
2.5
Fail
1.8
Fail
1.4
Fail
—
White BG
4.5AA
3.8AA Large
2.7Fail
2.1Fail
1.5Fail
Black BG
4.6AA
5.5AA
7.7AAA
10.1AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

787880
989775
C0BE6F
CACA83
D9D9A0

Deuteranopia

797A7F
9CA175
C8D26F
CED286
DADAA4

Tritanopia

7C7D7C
B47373
F47070
E28C8E
DDADAF

Achromatopsia

777777
858585
9B9B9B
B4B4B4
CECECE

Shades & Tints Shades & Tints

#7D7285

Dark
Light

#B86D78

Dark
Light

#FB726E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d7285;
  --color-2: #b86d78;
  --color-3: #fb726e;
  --color-4: #e5a778;
  --color-5: #ded290;
}

SCSS

$color-1: #7d7285;
$color-2: #b86d78;
$color-3: #fb726e;
$color-4: #e5a778;
$color-5: #ded290;

TAILWIND

colors: {
  'brand-1': '#7d7285',
  'brand-2': '#b86d78',
  'brand-3': '#fb726e',
  'brand-4': '#e5a778',
  'brand-5': '#ded290',
}

RGB Array

[125, 114, 133], [184, 109, 120], [251, 114, 110], [229, 167, 120], [222, 210, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7D7285, #B86D78, #FB726E, #E5A778, #DED290 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: #7d7285; --color-2: #b86d78; --color-3: #fb726e; --color-4: #e5a778; --color-5: #ded290. 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