← Back to Editor

#D4DAE3 · #383345 · #5B5D73 · #99A6BA · #F1F4FC

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D4DAE3

Azure · LightGray · Sky Blue

HEX
#D4DAE3
RGB
rgb(212, 218, 227)
HSL
hsl(216, 21%, 86%)
HSB
hsb(216, 7%, 89%)
CMYK
cmyk(7%, 4%, 0%, 11%)
Oklch
oklch(88.6% 0.014 258.3)

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

#383345

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#383345
RGB
rgb(56, 51, 69)
HSL
hsl(257, 15%, 24%)
HSB
hsb(257, 26%, 27%)
CMYK
cmyk(19%, 26%, 0%, 73%)
Oklch
oklch(33.4% 0.032 297.4)

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

#5B5D73

Indigo · DimGray · Prussian Blue

HEX
#5B5D73
RGB
rgb(91, 93, 115)
HSL
hsl(235, 12%, 40%)
HSB
hsb(235, 21%, 45%)
CMYK
cmyk(21%, 19%, 0%, 55%)
Oklch
oklch(48.5% 0.035 280.9)

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

#99A6BA

Azure · DarkGray · Cobalt Blue

HEX
#99A6BA
RGB
rgb(153, 166, 186)
HSL
hsl(216, 19%, 66%)
HSB
hsb(216, 18%, 73%)
CMYK
cmyk(18%, 11%, 0%, 27%)
Oklch
oklch(72.1% 0.033 258.9)

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

#F1F4FC

Azure · Snow · Sky Blue

HEX
#F1F4FC
RGB
rgb(241, 244, 252)
HSL
hsl(224, 65%, 97%)
HSB
hsb(224, 4%, 99%)
CMYK
cmyk(4%, 3%, 0%, 1%)
Oklch
oklch(96.7% 0.011 269.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4DAE3
E3DDD4

Analogous

D4E1E3
D4DAE3
D5D4E3

Triadic

D4DAE3
E3D4DA
DAE3D4

Split-Comp.

D4DAE3
E3D5D4
E1E3D4

Tetradic

D4DAE3
E3D4E1
E3DDD4
D4E3D5

Contrast Matrix WCAG 2.1 Contrast

D4DAE3
383345
5B5D73
99A6BA
F1F4FC
—
8.6
AAA
4.6
AA
1.8
Fail
1.3
Fail
8.6
AAA
—
1.9
Fail
4.9
AA
11.0
AAA
4.6
AA
1.9
Fail
—
2.6
Fail
5.9
AA
1.8
Fail
4.9
AA
2.6
Fail
—
2.2
Fail
1.3
Fail
11.0
AAA
5.9
AA
2.2
Fail
—
White BG
1.4Fail
12.2AAA
6.4AA
2.5Fail
1.1Fail
Black BG
14.9AAA
1.7Fail
3.3AA Large
8.5AAA
19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7E1
363641
5C5C6E
9F9FB5
F2F2FA

Deuteranopia

D6D6E0
363640
5C5C6C
9E9DB4
F2F2FA

Tritanopia

D4DFDF
383D3C
5B6969
9AB1B1
F1F9F8

Achromatopsia

D9D9D9
373737
5F5F5F
A4A4A4
F4F4F4

Shades & Tints Shades & Tints

#D4DAE3

Dark
Light

#383345

Dark
Light

#5B5D73

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4dae3;
  --color-2: #383345;
  --color-3: #5b5d73;
  --color-4: #99a6ba;
  --color-5: #f1f4fc;
}

SCSS

$color-1: #d4dae3;
$color-2: #383345;
$color-3: #5b5d73;
$color-4: #99a6ba;
$color-5: #f1f4fc;

TAILWIND

colors: {
  'brand-1': '#d4dae3',
  'brand-2': '#383345',
  'brand-3': '#5b5d73',
  'brand-4': '#99a6ba',
  'brand-5': '#f1f4fc',
}

RGB Array

[212, 218, 227], [56, 51, 69], [91, 93, 115], [153, 166, 186], [241, 244, 252]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #D4DAE3, #383345, #5B5D73, #99A6BA, #F1F4FC 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: #d4dae3; --color-2: #383345; --color-3: #5b5d73; --color-4: #99a6ba; --color-5: #f1f4fc. 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 dark-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