← Back to Editor

#7B9896 · #78618D · #80294C · #291E22 · #DDDECC

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 LibraryData Visualization

Color Details Color Details

#7B9896

Mineral Blue · LightSlateGray · Lake Green

HEX
#7B9896
RGB
rgb(123, 152, 150)
HSL
hsl(176, 12%, 54%)
HSB
hsb(176, 19%, 60%)
CMYK
cmyk(19%, 0%, 1%, 40%)
Oklch
oklch(65.7% 0.033 191.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#78618D

Dark Plum · SlateGray · Violet

HEX
#78618D
RGB
rgb(120, 97, 141)
HSL
hsl(271, 18%, 47%)
HSB
hsb(271, 31%, 55%)
CMYK
cmyk(15%, 31%, 0%, 45%)
Oklch
oklch(53.2% 0.072 307.9)

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

#80294C

Dark Violet · Brown · Camellia

HEX
#80294C
RGB
rgb(128, 41, 76)
HSL
hsl(336, 51%, 33%)
HSB
hsb(336, 68%, 50%)
CMYK
cmyk(0%, 68%, 41%, 50%)
Oklch
oklch(42.2% 0.124 359.1)

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

#291E22

Dark Violet · Black · Raspberry

HEX
#291E22
RGB
rgb(41, 30, 34)
HSL
hsl(338, 15%, 14%)
HSB
hsb(338, 27%, 16%)
CMYK
cmyk(0%, 27%, 17%, 84%)
Oklch
oklch(25.0% 0.018 354.8)

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

#DDDECC

Fresh Green · LightGray · Lemon Cream

HEX
#DDDECC
RGB
rgb(221, 222, 204)
HSL
hsl(63, 21%, 84%)
HSB
hsb(63, 8%, 87%)
CMYK
cmyk(0%, 0%, 8%, 13%)
Oklch
oklch(89.5% 0.024 109.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B9896
987C7E

Analogous

7C9888
7B9896
7C8C98

Triadic

7B9896
967C98
98967C

Split-Comp.

7B9896
987C8C
98887C

Tetradic

7B9896
887C98
987C7E
8C987C

Contrast Matrix WCAG 2.1 Contrast

7B9896
78618D
80294C
291E22
DDDECC
—
1.7
Fail
2.9
Fail
5.2
AA
2.3
Fail
1.7
Fail
—
1.7
Fail
3.0
Fail
4.0
AA Large
2.9
Fail
1.7
Fail
—
1.8
Fail
6.6
AA
5.2
AA
3.0
Fail
1.8
Fail
—
11.8
AAA
2.3
Fail
4.0
AA Large
6.6
AA
11.8
AAA
—
White BG
3.1AA Large
5.4AA
9.0AAA
16.1AAA
1.4Fail
Black BG
6.8AA
3.9AA Large
2.3Fail
1.3Fail
15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

888896
6E6E82
5A5A44
242421
DDDDD0

Deuteranopia

868497
6F7180
5F6642
252621
DDDDD1

Tritanopia

7C9797
777A78
7C3D3B
282020
DDD4D5

Achromatopsia

8F8F8F
6D6D6D
474747
222222
DCDCDC

Shades & Tints Shades & Tints

#7B9896

Dark
Light

#78618D

Dark
Light

#80294C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b9896;
  --color-2: #78618d;
  --color-3: #80294c;
  --color-4: #291e22;
  --color-5: #dddecc;
}

SCSS

$color-1: #7b9896;
$color-2: #78618d;
$color-3: #80294c;
$color-4: #291e22;
$color-5: #dddecc;

TAILWIND

colors: {
  'brand-1': '#7b9896',
  'brand-2': '#78618d',
  'brand-3': '#80294c',
  'brand-4': '#291e22',
  'brand-5': '#dddecc',
}

RGB Array

[123, 152, 150], [120, 97, 141], [128, 41, 76], [41, 30, 34], [221, 222, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7B9896, #78618D, #80294C, #291E22, #DDDECC is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #7b9896; --color-2: #78618d; --color-3: #80294c; --color-4: #291e22; --color-5: #dddecc. 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 tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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