← Back to Editor

#562234 · #5A484D · #5D6F66 · #61957E · #64BB97

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

#562234

Dark Violet · DarkSlateGray · Raspberry

HEX
#562234
RGB
rgb(86, 34, 52)
HSL
hsl(339, 43%, 24%)
HSB
hsb(339, 60%, 34%)
CMYK
cmyk(0%, 60%, 40%, 66%)
Oklch
oklch(33.3% 0.080 0.6)

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

#5A484D

Dark Violet · DarkSlateGray · Camellia

HEX
#5A484D
RGB
rgb(90, 72, 77)
HSL
hsl(343, 11%, 32%)
HSB
hsb(343, 20%, 35%)
CMYK
cmyk(0%, 20%, 14%, 65%)
Oklch
oklch(42.2% 0.026 359.7)

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

#5D6F66

Mineral Blue · DimGray · Charcoal

HEX
#5D6F66
RGB
rgb(93, 111, 102)
HSL
hsl(150, 9%, 40%)
HSB
hsb(150, 16%, 44%)
CMYK
cmyk(16%, 0%, 8%, 56%)
Oklch
oklch(52.4% 0.026 163.8)

Traditional「Mineral Blue」· Paint「Charcoal」· Creative Midnight Shadow

#61957E

Mineral Blue · SlateGray · Olive Green

HEX
#61957E
RGB
rgb(97, 149, 126)
HSL
hsl(153, 21%, 48%)
HSB
hsb(153, 35%, 58%)
CMYK
cmyk(35%, 0%, 15%, 42%)
Oklch
oklch(62.6% 0.066 164.8)

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

#64BB97

Mineral Blue · MediumAquaMarine · Olive Green

HEX
#64BB97
RGB
rgb(100, 187, 151)
HSL
hsl(155, 39%, 56%)
HSB
hsb(155, 47%, 73%)
CMYK
cmyk(47%, 0%, 19%, 27%)
Oklch
oklch(72.7% 0.101 164.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

562234
235845

Analogous

582350
562234
582B23

Triadic

562234
355823
233558

Split-Comp.

562234
23582B
235058

Tetradic

562234
505823
235845
2B2358

Contrast Matrix WCAG 2.1 Contrast

562234
5A484D
5D6F66
61957E
64BB97
—
1.5
Fail
2.3
Fail
3.6
AA Large
5.4
AA
1.5
Fail
—
1.6
Fail
2.5
Fail
3.7
AA Large
2.3
Fail
1.6
Fail
—
1.6
Fail
2.3
Fail
3.6
AA Large
2.5
Fail
1.6
Fail
—
1.5
Fail
5.4
AA
3.7
AA Large
2.3
Fail
1.5
Fail
—
White BG
12.5AAA
8.5AAA
5.3AA
3.4AA Large
2.3Fail
Black BG
1.7Fail
2.5Fail
3.9AA Large
6.1AA
9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F30
52524C
656568
787884
8A8AA0

Deuteranopia

43462F
53554C
646269
757185
857EA2

Tritanopia

532C2B
594B4B
5E6A6A
648889
68A7A8

Achromatopsia

343434
4E4E4E
696969
838383
9D9D9D

Shades & Tints Shades & Tints

#562234

Dark
Light

#5A484D

Dark
Light

#5D6F66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #562234;
  --color-2: #5a484d;
  --color-3: #5d6f66;
  --color-4: #61957e;
  --color-5: #64bb97;
}

SCSS

$color-1: #562234;
$color-2: #5a484d;
$color-3: #5d6f66;
$color-4: #61957e;
$color-5: #64bb97;

TAILWIND

colors: {
  'brand-1': '#562234',
  'brand-2': '#5a484d',
  'brand-3': '#5d6f66',
  'brand-4': '#61957e',
  'brand-5': '#64bb97',
}

RGB Array

[86, 34, 52], [90, 72, 77], [93, 111, 102], [97, 149, 126], [100, 187, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #562234, #5A484D, #5D6F66, #61957E, #64BB97 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: #562234; --color-2: #5a484d; --color-3: #5d6f66; --color-4: #61957e; --color-5: #64bb97. 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