← Back to Editor

#422F3C · #5F6560 · #7B9E87 · #BBCFA5 · #D9D3AD

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#422F3C

Rose Purple · DarkSlateGray · Eggplant

HEX
#422F3C
RGB
rgb(66, 47, 60)
HSL
hsl(319, 17%, 22%)
HSB
hsb(319, 29%, 26%)
CMYK
cmyk(0%, 29%, 9%, 74%)
Oklch
oklch(33.2% 0.035 338.4)

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

#5F6560

Ink Gray · DimGray · Charcoal

HEX
#5F6560
RGB
rgb(95, 101, 96)
HSL
hsl(130, 3%, 38%)
HSB
hsb(130, 6%, 40%)
CMYK
cmyk(6%, 0%, 5%, 60%)
Oklch
oklch(50.0% 0.011 150.5)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#7B9E87

Celadon · LightSlateGray · Olive Green

HEX
#7B9E87
RGB
rgb(123, 158, 135)
HSL
hsl(141, 15%, 55%)
HSB
hsb(141, 22%, 62%)
CMYK
cmyk(22%, 0%, 15%, 38%)
Oklch
oklch(66.6% 0.051 156.0)

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

#BBCFA5

Willow Green · Silver · Apple Green

HEX
#BBCFA5
RGB
rgb(187, 207, 165)
HSL
hsl(89, 30%, 73%)
HSB
hsb(89, 20%, 81%)
CMYK
cmyk(10%, 0%, 20%, 19%)
Oklch
oklch(82.8% 0.061 128.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D9D3AD

Fresh Green · Wheat · Lemon Cream

HEX
#D9D3AD
RGB
rgb(217, 211, 173)
HSL
hsl(52, 37%, 76%)
HSB
hsb(52, 20%, 85%)
CMYK
cmyk(0%, 3%, 20%, 15%)
Oklch
oklch(86.2% 0.051 99.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

422F3C
2F4235

Analogous

3E2F42
422F3C
422F32

Triadic

422F3C
3C422F
2F3C42

Split-Comp.

422F3C
32422F
2F423E

Tetradic

422F3C
423E2F
2F4235
2F3242

Contrast Matrix WCAG 2.1 Contrast

422F3C
5F6560
7B9E87
BBCFA5
D9D3AD
—
2.1
Fail
4.2
AA Large
7.4
AAA
8.1
AAA
2.1
Fail
—
2.0
Fail
3.6
AA Large
3.9
AA Large
4.2
AA Large
2.0
Fail
—
1.8
Fail
2.0
Fail
7.4
AAA
3.6
AA Large
1.8
Fail
—
1.1
Fail
8.1
AAA
3.9
AA Large
2.0
Fail
1.1
Fail
—
White BG
12.3AAA
6.0AA
3.0Fail
1.7Fail
1.5Fail
Black BG
1.7Fail
3.5AA Large
7.1AAA
12.6AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A39
626261
8A8A8D
C4C4AF
D6D6B6

Deuteranopia

3B3C38
616161
88868E
C3C1B2
D7D7B8

Tritanopia

413636
5F6262
7D9192
BCB7B9
D9BDBF

Achromatopsia

363636
636363
919191
C4C4C4
D0D0D0

Shades & Tints Shades & Tints

#422F3C

Dark
Light

#5F6560

Dark
Light

#7B9E87

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #422f3c;
  --color-2: #5f6560;
  --color-3: #7b9e87;
  --color-4: #bbcfa5;
  --color-5: #d9d3ad;
}

SCSS

$color-1: #422f3c;
$color-2: #5f6560;
$color-3: #7b9e87;
$color-4: #bbcfa5;
$color-5: #d9d3ad;

TAILWIND

colors: {
  'brand-1': '#422f3c',
  'brand-2': '#5f6560',
  'brand-3': '#7b9e87',
  'brand-4': '#bbcfa5',
  'brand-5': '#d9d3ad',
}

RGB Array

[66, 47, 60], [95, 101, 96], [123, 158, 135], [187, 207, 165], [217, 211, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #422F3C, #5F6560, #7B9E87, #BBCFA5, #D9D3AD 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: #422f3c; --color-2: #5f6560; --color-3: #7b9e87; --color-4: #bbcfa5; --color-5: #d9d3ad. 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