← Back to Editor

#040817 · #6E6C6D · #827F84 · #01E0FE · #D9DCDC

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#040817

Indigo · Black · Deep Sea Blue

HEX
#040817
RGB
rgb(4, 8, 23)
HSL
hsl(227, 70%, 5%)
HSB
hsb(227, 83%, 9%)
CMYK
cmyk(83%, 65%, 0%, 91%)
Oklch
oklch(13.9% 0.034 266.9)

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

#6E6C6D

Ink Gray · DimGray · Warm Gray

HEX
#6E6C6D
RGB
rgb(110, 108, 109)
HSL
hsl(330, 1%, 43%)
HSB
hsb(330, 2%, 43%)
CMYK
cmyk(0%, 2%, 1%, 57%)
Oklch
oklch(53.3% 0.003 345.3)

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

#827F84

Ash · Gray · Warm Gray

HEX
#827F84
RGB
rgb(130, 127, 132)
HSL
hsl(276, 2%, 51%)
HSB
hsb(276, 4%, 52%)
CMYK
cmyk(2%, 4%, 0%, 48%)
Oklch
oklch(60.1% 0.008 312.3)

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

#01E0FE

Lake Blue · Cyan · Mint Ice

HEX
#01E0FE
RGB
rgb(1, 224, 254)
HSL
hsl(187, 99%, 50%)
HSB
hsb(187, 100%, 100%)
CMYK
cmyk(100%, 12%, 0%, 0%)
Oklch
oklch(83.2% 0.145 211.8)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#D9DCDC

Plain White · LightGray · Cloud White

HEX
#D9DCDC
RGB
rgb(217, 220, 220)
HSL
hsl(180, 4%, 86%)
HSB
hsb(180, 1%, 86%)
CMYK
cmyk(1%, 0%, 0%, 14%)
Oklch
oklch(89.2% 0.003 197.1)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

040817
161204

Analogous

041116
040817
090416

Triadic

040817
160408
081604

Split-Comp.

040817
160904
111604

Tetradic

040817
160411
161204
041609

Contrast Matrix WCAG 2.1 Contrast

040817
6E6C6D
827F84
01E0FE
D9DCDC
—
3.8
AA Large
5.1
AA
12.4
AAA
14.5
AAA
3.8
AA Large
—
1.3
Fail
3.3
AA Large
3.8
AA Large
5.1
AA
1.3
Fail
—
2.5
Fail
2.9
Fail
12.4
AAA
3.3
AA Large
2.5
Fail
—
1.2
Fail
14.5
AAA
3.8
AA Large
2.9
Fail
1.2
Fail
—
White BG
20.0AAA
5.2AA
3.9AA Large
1.6Fail
1.4Fail
Black BG
1.1Fail
4.0AA Large
5.3AA
13.1AAA
15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

060613
6D6D6D
818183
6264F7
DADADC

Deuteranopia

060512
6D6D6D
818183
5544F5
DADADC

Tritanopia

041110
6E6D6D
828282
0CF1F0
D9DCDC

Achromatopsia

090909
6D6D6D
808080
A1A1A1
DBDBDB

Shades & Tints Shades & Tints

#040817

Dark
Light

#6E6C6D

Dark
Light

#827F84

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #040817;
  --color-2: #6e6c6d;
  --color-3: #827f84;
  --color-4: #01e0fe;
  --color-5: #d9dcdc;
}

SCSS

$color-1: #040817;
$color-2: #6e6c6d;
$color-3: #827f84;
$color-4: #01e0fe;
$color-5: #d9dcdc;

TAILWIND

colors: {
  'brand-1': '#040817',
  'brand-2': '#6e6c6d',
  'brand-3': '#827f84',
  'brand-4': '#01e0fe',
  'brand-5': '#d9dcdc',
}

RGB Array

[4, 8, 23], [110, 108, 109], [130, 127, 132], [1, 224, 254], [217, 220, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #040817, #6E6C6D, #827F84, #01E0FE, #D9DCDC is ideal for: 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: #040817; --color-2: #6e6c6d; --color-3: #827f84; --color-4: #01e0fe; --color-5: #d9dcdc. 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 pastel-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