← Back to Editor

#80889B · #5D3142 · #765566 · #A1A292 · #F1DDC4

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

#80889B

Azure · LightSlateGray · Navy Blue

HEX
#80889B
RGB
rgb(128, 136, 155)
HSL
hsl(222, 12%, 55%)
HSB
hsb(222, 17%, 61%)
CMYK
cmyk(17%, 12%, 0%, 39%)
Oklch
oklch(62.7% 0.030 267.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#5D3142

Dark Violet · DarkSlateGray · Camellia

HEX
#5D3142
RGB
rgb(93, 49, 66)
HSL
hsl(337, 31%, 28%)
HSB
hsb(337, 47%, 36%)
CMYK
cmyk(0%, 47%, 29%, 64%)
Oklch
oklch(37.5% 0.067 356.3)

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

#765566

Rose Purple · DimGray · Camellia

HEX
#765566
RGB
rgb(118, 85, 102)
HSL
hsl(329, 16%, 40%)
HSB
hsb(329, 28%, 46%)
CMYK
cmyk(0%, 28%, 14%, 54%)
Oklch
oklch(49.0% 0.050 346.8)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#A1A292

Autumn Sage · DarkGray · Silver Sand

HEX
#A1A292
RGB
rgb(161, 162, 146)
HSL
hsl(64, 8%, 60%)
HSB
hsb(64, 10%, 64%)
CMYK
cmyk(1%, 0%, 10%, 36%)
Oklch
oklch(70.7% 0.023 109.9)

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

#F1DDC4

Goose Yellow · Bisque · Peach Orange

HEX
#F1DDC4
RGB
rgb(241, 221, 196)
HSL
hsl(33, 62%, 86%)
HSB
hsb(33, 19%, 95%)
CMYK
cmyk(0%, 8%, 19%, 5%)
Oklch
oklch(90.7% 0.040 73.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

80889B
9A927E

Analogous

7E959A
80889B
847E9A

Triadic

80889B
9A7E87
879A7E

Split-Comp.

80889B
9A847E
959A7E

Tetradic

80889B
9A7E95
9A927E
7E9A84

Contrast Matrix WCAG 2.1 Contrast

80889B
5D3142
765566
A1A292
F1DDC4
—
3.0
Fail
1.8
Fail
1.4
Fail
2.7
Fail
3.0
Fail
—
1.6
Fail
4.1
AA Large
8.0
AAA
1.8
Fail
1.6
Fail
—
2.5
Fail
4.9
AA
1.4
Fail
4.1
AA Large
2.5
Fail
—
2.0
Fail
2.7
Fail
8.0
AAA
4.9
AA
2.0
Fail
—
White BG
3.6AA Large
10.6AAA
6.4AA
2.6Fail
1.3Fail
Black BG
5.9AA
2.0Fail
3.3AA Large
8.1AAA
15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

838496
4A4A3E
686762
A1A196
E8E8CA

Deuteranopia

838295
4D503D
6A6C61
A1A197
EAEBCC

Tritanopia

809392
5B3B3A
745F5E
A1999A
F0CFD0

Achromatopsia

888888
404040
616161
A0A0A0
E0E0E0

Shades & Tints Shades & Tints

#80889B

Dark
Light

#5D3142

Dark
Light

#765566

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #80889b;
  --color-2: #5d3142;
  --color-3: #765566;
  --color-4: #a1a292;
  --color-5: #f1ddc4;
}

SCSS

$color-1: #80889b;
$color-2: #5d3142;
$color-3: #765566;
$color-4: #a1a292;
$color-5: #f1ddc4;

TAILWIND

colors: {
  'brand-1': '#80889b',
  'brand-2': '#5d3142',
  'brand-3': '#765566',
  'brand-4': '#a1a292',
  'brand-5': '#f1ddc4',
}

RGB Array

[128, 136, 155], [93, 49, 66], [118, 85, 102], [161, 162, 146], [241, 221, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #80889B, #5D3142, #765566, #A1A292, #F1DDC4 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: #80889b; --color-2: #5d3142; --color-3: #765566; --color-4: #a1a292; --color-5: #f1ddc4. 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