← Back to Editor

#434544 · #A2B3A8 · #D1C7A7 · #D9D2BA · #DAE3D2

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#434544

Dark Cyan · DarkSlateGray · Charcoal

HEX
#434544
RGB
rgb(67, 69, 68)
HSL
hsl(150, 1%, 27%)
HSB
hsb(150, 3%, 27%)
CMYK
cmyk(3%, 0%, 1%, 73%)
Oklch
oklch(38.8% 0.003 164.9)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#A2B3A8

Celadon · DarkGray · Apple Green

HEX
#A2B3A8
RGB
rgb(162, 179, 168)
HSL
hsl(141, 10%, 67%)
HSB
hsb(141, 9%, 70%)
CMYK
cmyk(9%, 0%, 6%, 30%)
Oklch
oklch(75.0% 0.024 157.4)

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

#D1C7A7

Goose Yellow · Silver · Sunflower

HEX
#D1C7A7
RGB
rgb(209, 199, 167)
HSL
hsl(46, 31%, 74%)
HSB
hsb(46, 20%, 82%)
CMYK
cmyk(0%, 5%, 20%, 18%)
Oklch
oklch(83.0% 0.044 92.7)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#D9D2BA

Goose Yellow · LightGray · Lemon Cream

HEX
#D9D2BA
RGB
rgb(217, 210, 186)
HSL
hsl(46, 29%, 79%)
HSB
hsb(46, 14%, 85%)
CMYK
cmyk(0%, 3%, 14%, 15%)
Oklch
oklch(86.3% 0.033 93.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#DAE3D2

Celadon · LightGray · Mint Green

HEX
#DAE3D2
RGB
rgb(218, 227, 210)
HSL
hsl(92, 23%, 86%)
HSB
hsb(92, 7%, 89%)
CMYK
cmyk(4%, 0%, 7%, 11%)
Oklch
oklch(90.4% 0.025 129.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

434544
464445

Analogous

444644
434544
444646

Triadic

434544
454446
464544

Split-Comp.

434544
464446
464444

Tetradic

434544
444446
464445
464644

Contrast Matrix WCAG 2.1 Contrast

434544
A2B3A8
D1C7A7
D9D2BA
DAE3D2
—
4.4
AA Large
5.7
AA
6.4
AA
7.3
AAA
4.4
AA Large
—
1.3
Fail
1.5
Fail
1.7
Fail
5.7
AA
1.3
Fail
—
1.1
Fail
1.3
Fail
6.4
AA
1.5
Fail
1.1
Fail
—
1.1
Fail
7.3
AAA
1.7
Fail
1.3
Fail
1.1
Fail
—
White BG
9.7AAA
2.2Fail
1.7Fail
1.5Fail
1.3Fail
Black BG
2.2Fail
9.5AAA
12.4AAA
13.9AAA
15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

444444
A9AAAB
CDCDAF
D6D6C0
DEDED6

Deuteranopia

444444
A8A7AB
CDCEB1
D6D7C1
DDDDD7

Tritanopia

434444
A3ADAD
D0B5B6
D9C4C5
DAD9DA

Achromatopsia

444444
ADADAD
C6C6C6
D1D1D1
DEDEDE

Shades & Tints Shades & Tints

#434544

Dark
Light

#A2B3A8

Dark
Light

#D1C7A7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #434544;
  --color-2: #a2b3a8;
  --color-3: #d1c7a7;
  --color-4: #d9d2ba;
  --color-5: #dae3d2;
}

SCSS

$color-1: #434544;
$color-2: #a2b3a8;
$color-3: #d1c7a7;
$color-4: #d9d2ba;
$color-5: #dae3d2;

TAILWIND

colors: {
  'brand-1': '#434544',
  'brand-2': '#a2b3a8',
  'brand-3': '#d1c7a7',
  'brand-4': '#d9d2ba',
  'brand-5': '#dae3d2',
}

RGB Array

[67, 69, 68], [162, 179, 168], [209, 199, 167], [217, 210, 186], [218, 227, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #434544, #A2B3A8, #D1C7A7, #D9D2BA, #DAE3D2 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #434544; --color-2: #a2b3a8; --color-3: #d1c7a7; --color-4: #d9d2ba; --color-5: #dae3d2. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts 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