← Back to Editor

#493342 · #60A6A3 · #B4B8A9 · #DDC8AF · #DFE3CE

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

#493342

Rose Purple · DarkSlateGray · Eggplant

HEX
#493342
RGB
rgb(73, 51, 66)
HSL
hsl(319, 18%, 24%)
HSB
hsb(319, 30%, 29%)
CMYK
cmyk(0%, 30%, 10%, 71%)
Oklch
oklch(35.2% 0.040 338.7)

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

#60A6A3

Mineral Blue · CadetBlue · Lake Green

HEX
#60A6A3
RGB
rgb(96, 166, 163)
HSL
hsl(177, 28%, 51%)
HSB
hsb(177, 42%, 65%)
CMYK
cmyk(42%, 0%, 2%, 35%)
Oklch
oklch(67.8% 0.071 192.1)

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

#B4B8A9

Willow Green · DarkGray · Apple Green

HEX
#B4B8A9
RGB
rgb(180, 184, 169)
HSL
hsl(76, 10%, 69%)
HSB
hsb(76, 8%, 72%)
CMYK
cmyk(2%, 0%, 8%, 28%)
Oklch
oklch(77.5% 0.021 119.0)

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

#DDC8AF

Goose Yellow · Wheat · Peach Orange

HEX
#DDC8AF
RGB
rgb(221, 200, 175)
HSL
hsl(33, 40%, 78%)
HSB
hsb(33, 21%, 87%)
CMYK
cmyk(0%, 10%, 21%, 13%)
Oklch
oklch(84.4% 0.041 72.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#DFE3CE

Willow Green · LightGray · Mint Green

HEX
#DFE3CE
RGB
rgb(223, 227, 206)
HSL
hsl(71, 27%, 85%)
HSB
hsb(71, 9%, 89%)
CMYK
cmyk(2%, 0%, 9%, 11%)
Oklch
oklch(90.7% 0.028 115.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

493342
324839

Analogous

443248
493342
483236

Triadic

493342
414832
324148

Split-Comp.

493342
364832
324844

Tetradic

493342
484432
324839
323648

Contrast Matrix WCAG 2.1 Contrast

493342
60A6A3
B4B8A9
DDC8AF
DFE3CE
—
4.1
AA Large
5.6
AA
7.1
AAA
8.7
AAA
4.1
AA Large
—
1.4
Fail
1.7
Fail
2.1
Fail
5.6
AA
1.4
Fail
—
1.2
Fail
1.5
Fail
7.1
AAA
1.7
Fail
1.2
Fail
—
1.2
Fail
8.7
AAA
2.1
Fail
1.5
Fail
1.2
Fail
—
White BG
11.4AAA
2.8Fail
2.0Fail
1.6Fail
1.3Fail
Black BG
1.8Fail
7.5AAA
10.4AAA
13.0AAA
16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F3E
7E7FA4
B6B6AD
D4D4B5
E1E1D3

Deuteranopia

41423D
7A75A4
B6B5AE
D5D7B7
E1E0D4

Tritanopia

483C3B
63A4A4
B4AFB0
DCBABB
DFD7D8

Achromatopsia

3B3B3B
919191
B5B5B5
CBCBCB
DFDFDF

Shades & Tints Shades & Tints

#493342

Dark
Light

#60A6A3

Dark
Light

#B4B8A9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #493342;
  --color-2: #60a6a3;
  --color-3: #b4b8a9;
  --color-4: #ddc8af;
  --color-5: #dfe3ce;
}

SCSS

$color-1: #493342;
$color-2: #60a6a3;
$color-3: #b4b8a9;
$color-4: #ddc8af;
$color-5: #dfe3ce;

TAILWIND

colors: {
  'brand-1': '#493342',
  'brand-2': '#60a6a3',
  'brand-3': '#b4b8a9',
  'brand-4': '#ddc8af',
  'brand-5': '#dfe3ce',
}

RGB Array

[73, 51, 66], [96, 166, 163], [180, 184, 169], [221, 200, 175], [223, 227, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #493342, #60A6A3, #B4B8A9, #DDC8AF, #DFE3CE 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: #493342; --color-2: #60a6a3; --color-3: #b4b8a9; --color-4: #ddc8af; --color-5: #dfe3ce. 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