#D6D3E8 + #CEE2EB + #62D3F5 + #7299ED + #7E7A87 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D6D3E8

Wisteria · LightGray · Sky Blue

HEX

#D6D3E8

RGB

rgb(214, 211, 232)

HSL

hsl(249, 31%, 87%)

HSB

hsb(249, 9%, 91%)

CMYK

cmyk(8%, 9%, 0%, 9%)

Oklch

oklch(87.6% 0.029 292.4)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#CEE2EB

Sky Blue · Lavender · Glacier Blue

HEX

#CEE2EB

RGB

rgb(206, 226, 235)

HSL

hsl(199, 42%, 86%)

HSB

hsb(199, 12%, 92%)

CMYK

cmyk(12%, 4%, 0%, 8%)

Oklch

oklch(90.1% 0.025 226.5)

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

#62D3F5

Sky Blue · LightSkyBlue · Lake Green

HEX

#62D3F5

RGB

rgb(98, 211, 245)

HSL

hsl(194, 88%, 67%)

HSB

hsb(194, 60%, 96%)

CMYK

cmyk(60%, 14%, 0%, 4%)

Oklch

oklch(81.4% 0.113 220.6)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#7299ED

Azure · CornflowerBlue · Cobalt Blue

HEX

#7299ED

RGB

rgb(114, 153, 237)

HSL

hsl(221, 77%, 69%)

HSB

hsb(221, 52%, 93%)

CMYK

cmyk(52%, 35%, 0%, 7%)

Oklch

oklch(69.1% 0.132 264.3)

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

#7E7A87

Ink Gray · Gray · Warm Gray

HEX

#7E7A87

RGB

rgb(126, 122, 135)

HSL

hsl(258, 5%, 50%)

HSB

hsb(258, 10%, 53%)

CMYK

cmyk(7%, 10%, 0%, 47%)

Oklch

oklch(58.7% 0.020 299.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D6D3E8

E5E8D4

Analogous

D4DBE8

D6D3E8

E1D4E8

Triadic

D6D3E8

E8D7D4

D4E8D7

Split-Comp.

D6D3E8

E8E1D4

DBE8D4

Tetradic

D6D3E8

E8D4DB

E5E8D4

D4E8E1

Contrast Matrix WCAG 2.1 Contrast

D6D3E8	CEE2EB	62D3F5	7299ED	7E7A87
—	1.1 Fail	1.2 Fail	1.9 Fail	2.9 Fail
1.1 Fail	—	1.3 Fail	2.1 Fail	3.1 AA Large
1.2 Fail	1.3 Fail	—	1.6 Fail	2.4 Fail
1.9 Fail	2.1 Fail	1.6 Fail	—	1.5 Fail
2.9 Fail	3.1 AA Large	2.4 Fail	1.5 Fail	—

White BG

1.5Fail

1.3Fail

1.7Fail

2.8Fail

4.2AA Large

Black BG

14.3AAA

15.7AAA

12.2AAA

7.5AAA

5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5E3

D7D7E9

9394ED

8383D9

7C7C84

Deuteranopia

D5D5E2

D6D4E8

8C84EB

817ED4

7D7D83

Tritanopia

D6DFDE

CFE7E7

68E6E5

74C9C5

7E8181

Achromatopsia

D6D6D6

DDDDDD

B5B5B5

979797

7D7D7D

Shades & Tints Shades & Tints

#D6D3E8

Dark

Light

#CEE2EB

Dark

Light

#62D3F5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d6d3e8;
  --color-2: #cee2eb;
  --color-3: #62d3f5;
  --color-4: #7299ed;
  --color-5: #7e7a87;
}

SCSS

$color-1: #d6d3e8;
$color-2: #cee2eb;
$color-3: #62d3f5;
$color-4: #7299ed;
$color-5: #7e7a87;

TAILWIND

colors: {
  'brand-1': '#d6d3e8',
  'brand-2': '#cee2eb',
  'brand-3': '#62d3f5',
  'brand-4': '#7299ed',
  'brand-5': '#7e7a87',
}

RGB Array

[214, 211, 232], [206, 226, 235], [98, 211, 245], [114, 153, 237], [126, 122, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D6D3E8, #CEE2EB, #62D3F5, #7299ED, #7E7A87 is ideal for: health products, baby brands, fresh-style blogs. 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: #d6d3e8; --color-2: #cee2eb; --color-3: #62d3f5; --color-4: #7299ed; --color-5: #7e7a87. 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. 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