← Back to Editor

#D8CEC5 · #7C7A76 · #424A5F · #1A172E · #020D10

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

#D8CEC5

Apricot · LightGray · Peach Orange

HEX
#D8CEC5
RGB
rgb(216, 206, 197)
HSL
hsl(28, 20%, 81%)
HSB
hsb(28, 9%, 85%)
CMYK
cmyk(0%, 5%, 9%, 15%)
Oklch
oklch(85.7% 0.017 64.6)

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

#7C7A76

Ink Gray · Gray · Warm Gray

HEX
#7C7A76
RGB
rgb(124, 122, 118)
HSL
hsl(40, 2%, 47%)
HSB
hsb(40, 5%, 49%)
CMYK
cmyk(0%, 2%, 5%, 51%)
Oklch
oklch(58.0% 0.007 84.6)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#424A5F

Indigo · DarkSlateGray · Prussian Blue

HEX
#424A5F
RGB
rgb(66, 74, 95)
HSL
hsl(223, 18%, 32%)
HSB
hsb(223, 31%, 37%)
CMYK
cmyk(31%, 22%, 0%, 63%)
Oklch
oklch(41.1% 0.037 268.5)

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

#1A172E

Deep Indigo · Black · Deep Sea Blue

HEX
#1A172E
RGB
rgb(26, 23, 46)
HSL
hsl(248, 33%, 14%)
HSB
hsb(248, 50%, 18%)
CMYK
cmyk(43%, 50%, 0%, 82%)
Oklch
oklch(22.1% 0.044 288.2)

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

#020D10

Lake Blue · Black · Peacock Green

HEX
#020D10
RGB
rgb(2, 13, 16)
HSL
hsl(193, 78%, 4%)
HSB
hsb(193, 88%, 6%)
CMYK
cmyk(88%, 19%, 0%, 94%)
Oklch
oklch(14.8% 0.021 213.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8CEC5
C5CFD8

Analogous

D8C5C6
D8CEC5
D8D8C5

Triadic

D8CEC5
C5D8CE
CEC5D8

Split-Comp.

D8CEC5
C5D8D8
C5C6D8

Tetradic

D8CEC5
C6D8C5
C5CFD8
D8C5D8

Contrast Matrix WCAG 2.1 Contrast

D8CEC5
7C7A76
424A5F
1A172E
020D10
—
2.8
Fail
5.7
AA
11.2
AAA
12.7
AAA
2.8
Fail
—
2.1
Fail
4.1
AA Large
4.6
AA
5.7
AA
2.1
Fail
—
2.0
Fail
2.2
Fail
11.2
AAA
4.1
AA Large
2.0
Fail
—
1.1
Fail
12.7
AAA
4.6
AA
2.2
Fail
1.1
Fail
—
White BG
1.5Fail
4.3AA Large
8.8AAA
17.4AAA
19.7AAA
Black BG
13.6AAA
4.9AA
2.4Fail
1.2Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4C7
7B7B77
45465A
191928
07070F

Deuteranopia

D4D5C8
7B7B77
454459
191927
06050F

Tritanopia

D8C9C9
7C7878
425655
1A2423
030F0F

Achromatopsia

D0D0D0
7A7A7A
4A4A4A
1B1B1B
0A0A0A

Shades & Tints Shades & Tints

#D8CEC5

Dark
Light

#7C7A76

Dark
Light

#424A5F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8cec5;
  --color-2: #7c7a76;
  --color-3: #424a5f;
  --color-4: #1a172e;
  --color-5: #020d10;
}

SCSS

$color-1: #d8cec5;
$color-2: #7c7a76;
$color-3: #424a5f;
$color-4: #1a172e;
$color-5: #020d10;

TAILWIND

colors: {
  'brand-1': '#d8cec5',
  'brand-2': '#7c7a76',
  'brand-3': '#424a5f',
  'brand-4': '#1a172e',
  'brand-5': '#020d10',
}

RGB Array

[216, 206, 197], [124, 122, 118], [66, 74, 95], [26, 23, 46], [2, 13, 16]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8CEC5, #7C7A76, #424A5F, #1A172E, #020D10 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d8cec5; --color-2: #7c7a76; --color-3: #424a5f; --color-4: #1a172e; --color-5: #020d10. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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. 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