← Back to Editor

#345953 · #56646A · #786E81 · #9A7998 · #BC83AE

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

#345953

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#345953
RGB
rgb(52, 89, 83)
HSL
hsl(170, 26%, 28%)
HSB
hsb(170, 42%, 35%)
CMYK
cmyk(42%, 0%, 7%, 65%)
Oklch
oklch(43.4% 0.044 182.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#56646A

Slate Blue · DimGray · Mint Ice

HEX
#56646A
RGB
rgb(86, 100, 106)
HSL
hsl(198, 10%, 38%)
HSB
hsb(198, 19%, 42%)
CMYK
cmyk(19%, 6%, 0%, 58%)
Oklch
oklch(49.4% 0.020 225.5)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#786E81

Dark Plum · Gray · Warm Gray

HEX
#786E81
RGB
rgb(120, 110, 129)
HSL
hsl(272, 8%, 47%)
HSB
hsb(272, 15%, 51%)
CMYK
cmyk(7%, 15%, 0%, 49%)
Oklch
oklch(55.4% 0.031 308.9)

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

#9A7998

Rose Purple · Gray · Violet

HEX
#9A7998
RGB
rgb(154, 121, 152)
HSL
hsl(304, 14%, 54%)
HSB
hsb(304, 21%, 60%)
CMYK
cmyk(0%, 21%, 1%, 40%)
Oklch
oklch(61.8% 0.060 328.3)

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

#BC83AE

Mauve · DarkGray · Lilac Purple

HEX
#BC83AE
RGB
rgb(188, 131, 174)
HSL
hsl(315, 30%, 63%)
HSB
hsb(315, 30%, 74%)
CMYK
cmyk(0%, 30%, 7%, 26%)
Oklch
oklch(68.1% 0.090 335.8)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

345953
5A353B

Analogous

355A41
345953
354E5A

Triadic

345953
54355A
5A5435

Split-Comp.

345953
5A354E
5A4135

Tetradic

345953
41355A
5A353B
4E5A35

Contrast Matrix WCAG 2.1 Contrast

345953
56646A
786E81
9A7998
BC83AE
—
1.3
Fail
1.6
Fail
2.1
Fail
2.6
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
2.6
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
White BG
7.8AAA
6.1AA
4.8AA
3.8AA Large
3.0AA Large
Black BG
2.7Fail
3.4AA Large
4.3AA Large
5.6AA
7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

444454
5C5C69
74747C
8C8B90
A3A3A4

Deuteranopia

423F55
5B5A68
74757B
8E908F
A7ABA1

Tritanopia

365656
576767
787978
988B89
B99B9A

Achromatopsia

4D4D4D
606060
737373
868686
999999

Shades & Tints Shades & Tints

#345953

Dark
Light

#56646A

Dark
Light

#786E81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #345953;
  --color-2: #56646a;
  --color-3: #786e81;
  --color-4: #9a7998;
  --color-5: #bc83ae;
}

SCSS

$color-1: #345953;
$color-2: #56646a;
$color-3: #786e81;
$color-4: #9a7998;
$color-5: #bc83ae;

TAILWIND

colors: {
  'brand-1': '#345953',
  'brand-2': '#56646a',
  'brand-3': '#786e81',
  'brand-4': '#9a7998',
  'brand-5': '#bc83ae',
}

RGB Array

[52, 89, 83], [86, 100, 106], [120, 110, 129], [154, 121, 152], [188, 131, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #345953, #56646A, #786E81, #9A7998, #BC83AE is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #345953; --color-2: #56646a; --color-3: #786e81; --color-4: #9a7998; --color-5: #bc83ae. 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. 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