← Back to Editor

#849491 · #C9798A · #E07E84 · #D9987E · #CFB284

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#849491

Ash · LightSlateGray · Warm Gray

HEX
#849491
RGB
rgb(132, 148, 145)
HSL
hsl(169, 7%, 55%)
HSB
hsb(169, 11%, 58%)
CMYK
cmyk(11%, 0%, 2%, 42%)
Oklch
oklch(65.3% 0.019 183.2)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#C9798A

Peach Pink · LightCoral · Coral Red

HEX
#C9798A
RGB
rgb(201, 121, 138)
HSL
hsl(347, 43%, 63%)
HSB
hsb(347, 40%, 79%)
CMYK
cmyk(0%, 40%, 31%, 21%)
Oklch
oklch(66.7% 0.102 6.5)

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

#E07E84

Peach Pink · LightCoral · Coral Red

HEX
#E07E84
RGB
rgb(224, 126, 132)
HSL
hsl(356, 61%, 69%)
HSB
hsb(356, 44%, 88%)
CMYK
cmyk(0%, 44%, 41%, 12%)
Oklch
oklch(70.2% 0.121 16.8)

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

#D9987E

Apricot · DarkSalmon · Warm Sun

HEX
#D9987E
RGB
rgb(217, 152, 126)
HSL
hsl(17, 54%, 67%)
HSB
hsb(17, 42%, 85%)
CMYK
cmyk(0%, 30%, 42%, 15%)
Oklch
oklch(73.7% 0.087 42.7)

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

#CFB284

Ginger · Tan · Warm Sun

HEX
#CFB284
RGB
rgb(207, 178, 132)
HSL
hsl(37, 44%, 66%)
HSB
hsb(37, 36%, 81%)
CMYK
cmyk(0%, 14%, 36%, 19%)
Oklch
oklch(77.8% 0.070 78.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

849491
948487

Analogous

849489
849491
848F94

Triadic

849491
918494
949184

Split-Comp.

849491
94848F
948984

Tetradic

849491
898494
948487
8F9484

Contrast Matrix WCAG 2.1 Contrast

849491
C9798A
E07E84
D9987E
CFB284
—
1.0
Fail
1.1
Fail
1.3
Fail
1.6
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.3
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
White BG
3.2AA Large
3.2AA Large
2.8Fail
2.4Fail
2.0Fail
Black BG
6.6AA
6.6AA
7.5AAA
8.7AAA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8B92
A6A686
B6B583
BDBC84
C2C28F

Deuteranopia

8A8992
ABB185
BBC382
C1C586
C4C692

Tritanopia

859292
C58382
DB8181
D6898A
CE989A

Achromatopsia

8F8F8F
939393
9C9C9C
A8A8A8
B5B5B5

Shades & Tints Shades & Tints

#849491

Dark
Light

#C9798A

Dark
Light

#E07E84

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #849491;
  --color-2: #c9798a;
  --color-3: #e07e84;
  --color-4: #d9987e;
  --color-5: #cfb284;
}

SCSS

$color-1: #849491;
$color-2: #c9798a;
$color-3: #e07e84;
$color-4: #d9987e;
$color-5: #cfb284;

TAILWIND

colors: {
  'brand-1': '#849491',
  'brand-2': '#c9798a',
  'brand-3': '#e07e84',
  'brand-4': '#d9987e',
  'brand-5': '#cfb284',
}

RGB Array

[132, 148, 145], [201, 121, 138], [224, 126, 132], [217, 152, 126], [207, 178, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #849491, #C9798A, #E07E84, #D9987E, #CFB284 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: #849491; --color-2: #c9798a; --color-3: #e07e84; --color-4: #d9987e; --color-5: #cfb284. 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