← Back to Editor

#40474F · #C6C2CC · #DADDEE · #ECF0F3 · #D8C6BF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#40474F

Indigo · DarkSlateGray · Prussian Blue

HEX
#40474F
RGB
rgb(64, 71, 79)
HSL
hsl(212, 10%, 28%)
HSB
hsb(212, 19%, 31%)
CMYK
cmyk(19%, 10%, 0%, 69%)
Oklch
oklch(39.5% 0.016 251.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#C6C2CC

Wisteria · Silver · Pearl Gray

HEX
#C6C2CC
RGB
rgb(198, 194, 204)
HSL
hsl(264, 9%, 78%)
HSB
hsb(264, 5%, 80%)
CMYK
cmyk(3%, 5%, 0%, 20%)
Oklch
oklch(82.0% 0.014 304.1)

Traditional「Wisteria」· Paint「Pearl Gray」· Creative Silver Lining

#DADDEE

Azure · Lavender · Sky Blue

HEX
#DADDEE
RGB
rgb(218, 221, 238)
HSL
hsl(231, 37%, 89%)
HSB
hsb(231, 8%, 93%)
CMYK
cmyk(8%, 7%, 0%, 7%)
Oklch
oklch(90.0% 0.023 277.9)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#ECF0F3

Sky Blue · Lavender · Sky Blue

HEX
#ECF0F3
RGB
rgb(236, 240, 243)
HSL
hsl(206, 23%, 94%)
HSB
hsb(206, 3%, 95%)
CMYK
cmyk(3%, 1%, 0%, 5%)
Oklch
oklch(95.3% 0.006 239.8)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#D8C6BF

Apricot · LightGray · Peach Orange

HEX
#D8C6BF
RGB
rgb(216, 198, 191)
HSL
hsl(17, 24%, 80%)
HSB
hsb(17, 12%, 85%)
CMYK
cmyk(0%, 8%, 12%, 15%)
Oklch
oklch(83.9% 0.023 42.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

40474F
4F4840

Analogous

404E4F
40474F
41404F

Triadic

40474F
4F4047
474F40

Split-Comp.

40474F
4F4140
4E4F40

Tetradic

40474F
4F404E
4F4840
404F41

Contrast Matrix WCAG 2.1 Contrast

40474F
C6C2CC
DADDEE
ECF0F3
D8C6BF
—
5.4
AA
7.0
AA
8.2
AAA
5.7
AA
5.4
AA
—
1.3
Fail
1.5
Fail
1.1
Fail
7.0
AA
1.3
Fail
—
1.2
Fail
1.2
Fail
8.2
AAA
1.5
Fail
1.2
Fail
—
1.4
Fail
5.7
AA
1.1
Fail
1.2
Fail
1.4
Fail
—
White BG
9.4AAA
1.8Fail
1.3Fail
1.1Fail
1.6Fail
Black BG
2.2Fail
12.0AAA
15.6AAA
18.3AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

43434D
C4C4CA
DBDBEA
EEEEF2
D0D0C1

Deuteranopia

43424D
C5C5C9
DBDBE9
EEEDF2
D1D3C1

Tritanopia

404C4B
C6C8C7
DAE7E6
ECF2F2
D7C2C2

Achromatopsia

464646
C4C4C4
DEDEDE
EFEFEF
CBCBCB

Shades & Tints Shades & Tints

#40474F

Dark
Light

#C6C2CC

Dark
Light

#DADDEE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #40474f;
  --color-2: #c6c2cc;
  --color-3: #daddee;
  --color-4: #ecf0f3;
  --color-5: #d8c6bf;
}

SCSS

$color-1: #40474f;
$color-2: #c6c2cc;
$color-3: #daddee;
$color-4: #ecf0f3;
$color-5: #d8c6bf;

TAILWIND

colors: {
  'brand-1': '#40474f',
  'brand-2': '#c6c2cc',
  'brand-3': '#daddee',
  'brand-4': '#ecf0f3',
  'brand-5': '#d8c6bf',
}

RGB Array

[64, 71, 79], [198, 194, 204], [218, 221, 238], [236, 240, 243], [216, 198, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #40474F, #C6C2CC, #DADDEE, #ECF0F3, #D8C6BF 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: #40474f; --color-2: #c6c2cc; --color-3: #daddee; --color-4: #ecf0f3; --color-5: #d8c6bf. 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