← Back to Editor

#4F3D55 · #5B646D · #97ACA5 · #D9C7B9 · #937C74

cool

A 5-color cool 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

#4F3D55

Dark Plum · DarkSlateGray · Eggplant

HEX
#4F3D55
RGB
rgb(79, 61, 85)
HSL
hsl(285, 16%, 29%)
HSB
hsb(285, 28%, 33%)
CMYK
cmyk(7%, 28%, 0%, 67%)
Oklch
oklch(38.9% 0.046 317.6)

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

#5B646D

Indigo · DimGray · Charcoal

HEX
#5B646D
RGB
rgb(91, 100, 109)
HSL
hsl(210, 9%, 39%)
HSB
hsb(210, 17%, 43%)
CMYK
cmyk(17%, 8%, 0%, 57%)
Oklch
oklch(49.9% 0.018 248.2)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#97ACA5

Jade · DarkGray · Lake Green

HEX
#97ACA5
RGB
rgb(151, 172, 165)
HSL
hsl(160, 11%, 63%)
HSB
hsb(160, 12%, 67%)
CMYK
cmyk(12%, 0%, 4%, 33%)
Oklch
oklch(72.6% 0.025 173.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D9C7B9

Apricot · Silver · Peach Orange

HEX
#D9C7B9
RGB
rgb(217, 199, 185)
HSL
hsl(26, 30%, 79%)
HSB
hsb(26, 15%, 85%)
CMYK
cmyk(0%, 8%, 15%, 15%)
Oklch
oklch(84.1% 0.028 60.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#937C74

Tangerine · Gray · Warm Sun

HEX
#937C74
RGB
rgb(147, 124, 116)
HSL
hsl(15, 13%, 52%)
HSB
hsb(15, 21%, 58%)
CMYK
cmyk(0%, 16%, 21%, 42%)
Oklch
oklch(60.5% 0.031 40.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F3D55
44563E

Analogous

443E56
4F3D55
563E50

Triadic

4F3D55
56503E
3E5650

Split-Comp.

4F3D55
50563E
3E5644

Tetradic

4F3D55
56443E
44563E
3E5056

Contrast Matrix WCAG 2.1 Contrast

4F3D55
5B646D
97ACA5
D9C7B9
937C74
—
1.6
Fail
4.1
AA Large
6.0
AA
2.5
Fail
1.6
Fail
—
2.5
Fail
3.7
AA Large
1.5
Fail
4.1
AA Large
2.5
Fail
—
1.5
Fail
1.6
Fail
6.0
AA
3.7
AA Large
1.5
Fail
—
2.4
Fail
2.5
Fail
1.5
Fail
1.6
Fail
2.4
Fail
—
White BG
9.9AAA
6.0AA
2.4Fail
1.6Fail
3.9AA Large
Black BG
2.1Fail
3.5AA Large
8.8AAA
12.8AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47474F
5F5F6B
A0A0A7
D1D1BC
898976

Deuteranopia

484A4E
5E5E6A
9F9DA7
D2D4BD
8A8C76

Tritanopia

4E4B4A
5B6969
98A8A8
D8BFC0
927778

Achromatopsia

454545
626262
A5A5A5
CBCBCB
828282

Shades & Tints Shades & Tints

#4F3D55

Dark
Light

#5B646D

Dark
Light

#97ACA5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f3d55;
  --color-2: #5b646d;
  --color-3: #97aca5;
  --color-4: #d9c7b9;
  --color-5: #937c74;
}

SCSS

$color-1: #4f3d55;
$color-2: #5b646d;
$color-3: #97aca5;
$color-4: #d9c7b9;
$color-5: #937c74;

TAILWIND

colors: {
  'brand-1': '#4f3d55',
  'brand-2': '#5b646d',
  'brand-3': '#97aca5',
  'brand-4': '#d9c7b9',
  'brand-5': '#937c74',
}

RGB Array

[79, 61, 85], [91, 100, 109], [151, 172, 165], [217, 199, 185], [147, 124, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #4F3D55, #5B646D, #97ACA5, #D9C7B9, #937C74 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: #4f3d55; --color-2: #5b646d; --color-3: #97aca5; --color-4: #d9c7b9; --color-5: #937c74. 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 cool-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