← Back to Editor

#D6E4E7 · #534E52 · #555459 · #74676E · #C4BFC5

summer

A 5-color summer 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

#D6E4E7

Sky Blue · Lavender · Glacier Blue

HEX
#D6E4E7
RGB
rgb(214, 228, 231)
HSL
hsl(191, 26%, 87%)
HSB
hsb(191, 7%, 91%)
CMYK
cmyk(7%, 1%, 0%, 9%)
Oklch
oklch(90.9% 0.016 212.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#534E52

Ink Gray · DarkSlateGray · Charcoal

HEX
#534E52
RGB
rgb(83, 78, 82)
HSL
hsl(312, 3%, 32%)
HSB
hsb(312, 6%, 33%)
CMYK
cmyk(0%, 6%, 1%, 67%)
Oklch
oklch(43.0% 0.009 332.3)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#555459

Ink Gray · DimGray · Charcoal

HEX
#555459
RGB
rgb(85, 84, 89)
HSL
hsl(252, 3%, 34%)
HSB
hsb(252, 6%, 35%)
CMYK
cmyk(4%, 6%, 0%, 65%)
Oklch
oklch(44.9% 0.008 295.2)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#74676E

Ink Gray · DimGray · Warm Gray

HEX
#74676E
RGB
rgb(116, 103, 110)
HSL
hsl(328, 6%, 43%)
HSB
hsb(328, 11%, 45%)
CMYK
cmyk(0%, 11%, 5%, 55%)
Oklch
oklch(52.8% 0.019 344.1)

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

#C4BFC5

Silver Gray · Silver · Pearl Gray

HEX
#C4BFC5
RGB
rgb(196, 191, 197)
HSL
hsl(290, 5%, 76%)
HSB
hsb(290, 3%, 77%)
CMYK
cmyk(1%, 3%, 0%, 23%)
Oklch
oklch(81.0% 0.010 320.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D6E4E7
E6D8D5

Analogous

D5E6E1
D6E4E7
D5DBE6

Triadic

D6E4E7
E6D5E3
E3E6D5

Split-Comp.

D6E4E7
E6D5DB
E6E1D5

Tetradic

D6E4E7
E1D5E6
E6D8D5
DBE6D5

Contrast Matrix WCAG 2.1 Contrast

D6E4E7
534E52
555459
74676E
C4BFC5
—
6.2
AA
5.8
AA
4.1
AA Large
1.4
Fail
6.2
AA
—
1.1
Fail
1.5
Fail
4.5
AA Large
5.8
AA
1.1
Fail
—
1.4
Fail
4.1
AA Large
4.1
AA Large
1.5
Fail
1.4
Fail
—
3.0
Fail
1.4
Fail
4.5
AA Large
4.1
AA Large
3.0
Fail
—
White BG
1.3Fail
8.1AAA
7.5AAA
5.4AA
1.8Fail
Black BG
16.1AAA
2.6Fail
2.8Fail
3.9AA Large
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCE6
515151
555558
6E6E6C
C2C2C4

Deuteranopia

DBDAE6
515251
555558
6F706C
C2C3C3

Tritanopia

D7E6E6
535050
555757
736B6B
C4C2C2

Achromatopsia

E0E0E0
505050
555555
6C6C6C
C1C1C1

Shades & Tints Shades & Tints

#D6E4E7

Dark
Light

#534E52

Dark
Light

#555459

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d6e4e7;
  --color-2: #534e52;
  --color-3: #555459;
  --color-4: #74676e;
  --color-5: #c4bfc5;
}

SCSS

$color-1: #d6e4e7;
$color-2: #534e52;
$color-3: #555459;
$color-4: #74676e;
$color-5: #c4bfc5;

TAILWIND

colors: {
  'brand-1': '#d6e4e7',
  'brand-2': '#534e52',
  'brand-3': '#555459',
  'brand-4': '#74676e',
  'brand-5': '#c4bfc5',
}

RGB Array

[214, 228, 231], [83, 78, 82], [85, 84, 89], [116, 103, 110], [196, 191, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #D6E4E7, #534E52, #555459, #74676E, #C4BFC5 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: #d6e4e7; --color-2: #534e52; --color-3: #555459; --color-4: #74676e; --color-5: #c4bfc5. 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 summer-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