← Back to Editor

#54224A · #516E47 · #65888C · #AEA9C2 · #BFD5D0

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

#54224A

Rose Purple · DarkSlateGray · Eggplant

HEX
#54224A
RGB
rgb(84, 34, 74)
HSL
hsl(312, 42%, 23%)
HSB
hsb(312, 60%, 33%)
CMYK
cmyk(0%, 60%, 12%, 67%)
Oklch
oklch(34.0% 0.093 335.7)

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

#516E47

Celadon · DarkOliveGreen · Forest Green

HEX
#516E47
RGB
rgb(81, 110, 71)
HSL
hsl(105, 22%, 35%)
HSB
hsb(105, 35%, 43%)
CMYK
cmyk(26%, 0%, 35%, 57%)
Oklch
oklch(50.5% 0.069 137.9)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#65888C

Slate Blue · SlateGray · Mint Ice

HEX
#65888C
RGB
rgb(101, 136, 140)
HSL
hsl(186, 16%, 47%)
HSB
hsb(186, 28%, 55%)
CMYK
cmyk(28%, 3%, 0%, 45%)
Oklch
oklch(60.2% 0.040 204.9)

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

#AEA9C2

Wisteria · DarkGray · Cobalt Blue

HEX
#AEA9C2
RGB
rgb(174, 169, 194)
HSL
hsl(252, 17%, 71%)
HSB
hsb(252, 13%, 76%)
CMYK
cmyk(10%, 13%, 0%, 24%)
Oklch
oklch(74.7% 0.036 294.7)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#BFD5D0

Jade · LightGray · Glacier Blue

HEX
#BFD5D0
RGB
rgb(191, 213, 208)
HSL
hsl(166, 21%, 79%)
HSB
hsb(166, 10%, 84%)
CMYK
cmyk(10%, 0%, 2%, 16%)
Oklch
oklch(85.5% 0.025 180.5)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

54224A
22532C

Analogous

452253
54224A
532231

Triadic

54224A
495322
224953

Split-Comp.

54224A
315322
225345

Tetradic

54224A
534522
22532C
223153

Contrast Matrix WCAG 2.1 Contrast

54224A
516E47
65888C
AEA9C2
BFD5D0
—
2.2
Fail
3.2
AA Large
5.4
AA
8.0
AAA
2.2
Fail
—
1.5
Fail
2.5
Fail
3.7
AA Large
3.2
AA Large
1.5
Fail
—
1.7
Fail
2.5
Fail
5.4
AA
2.5
Fail
1.7
Fail
—
1.5
Fail
8.0
AAA
3.7
AA Large
2.5
Fail
1.5
Fail
—
White BG
12.3AAA
5.7AA
3.9AA Large
2.3Fail
1.5Fail
Black BG
1.7Fail
3.7AA Large
5.5AA
9.3AAA
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E40
5E5E50
74748B
ACACBC
C9C9D1

Deuteranopia

41453E
5C5A53
726F8B
ACADBA
C7C6D2

Tritanopia

523937
52585A
678A8A
AEB7B6
C0D2D2

Achromatopsia

363636
616161
7E7E7E
ADADAD
CECECE

Shades & Tints Shades & Tints

#54224A

Dark
Light

#516E47

Dark
Light

#65888C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #54224a;
  --color-2: #516e47;
  --color-3: #65888c;
  --color-4: #aea9c2;
  --color-5: #bfd5d0;
}

SCSS

$color-1: #54224a;
$color-2: #516e47;
$color-3: #65888c;
$color-4: #aea9c2;
$color-5: #bfd5d0;

TAILWIND

colors: {
  'brand-1': '#54224a',
  'brand-2': '#516e47',
  'brand-3': '#65888c',
  'brand-4': '#aea9c2',
  'brand-5': '#bfd5d0',
}

RGB Array

[84, 34, 74], [81, 110, 71], [101, 136, 140], [174, 169, 194], [191, 213, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #54224A, #516E47, #65888C, #AEA9C2, #BFD5D0 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: #54224a; --color-2: #516e47; --color-3: #65888c; --color-4: #aea9c2; --color-5: #bfd5d0. 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