#D3DBEB + #BECDEB + #A6B5FF + #9CA8E6 + #808BBF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D3DBEB

Azure · LightGray · Sky Blue

HEX

#D3DBEB

RGB

rgb(211, 219, 235)

HSL

hsl(220, 37%, 87%)

HSB

hsb(220, 10%, 92%)

CMYK

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

Oklch

oklch(89.0% 0.024 264.4)

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

#BECDEB

Azure · LightBlue · Sky Blue

HEX

#BECDEB

RGB

rgb(190, 205, 235)

HSL

hsl(220, 53%, 83%)

HSB

hsb(220, 19%, 92%)

CMYK

cmyk(19%, 13%, 0%, 8%)

Oklch

oklch(84.7% 0.045 264.3)

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

#A6B5FF

Azure · LightSteelBlue · Sky Blue

HEX

#A6B5FF

RGB

rgb(166, 181, 255)

HSL

hsl(230, 100%, 83%)

HSB

hsb(230, 35%, 100%)

CMYK

cmyk(35%, 29%, 0%, 0%)

Oklch

oklch(78.9% 0.107 274.9)

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

#9CA8E6

Azure · LightSteelBlue · Cobalt Blue

HEX

#9CA8E6

RGB

rgb(156, 168, 230)

HSL

hsl(230, 60%, 76%)

HSB

hsb(230, 32%, 90%)

CMYK

cmyk(32%, 27%, 0%, 10%)

Oklch

oklch(74.5% 0.091 275.5)

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

#808BBF

Azure · LightSlateGray · Cobalt Blue

HEX

#808BBF

RGB

rgb(128, 139, 191)

HSL

hsl(230, 33%, 63%)

HSB

hsb(230, 33%, 75%)

CMYK

cmyk(33%, 27%, 0%, 25%)

Oklch

oklch(64.8% 0.079 274.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3DBEB

EAE2D2

Analogous

D2E6EA

D3DBEB

D6D2EA

Triadic

D3DBEB

EAD2DA

DAEAD2

Split-Comp.

D3DBEB

EAD6D2

E6EAD2

Tetradic

D3DBEB

EAD2E6

EAE2D2

D2EAD6

Contrast Matrix WCAG 2.1 Contrast

D3DBEB	BECDEB	A6B5FF	9CA8E6	808BBF
—	1.2 Fail	1.4 Fail	1.6 Fail	2.4 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	2.1 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.7 Fail
1.6 Fail	1.4 Fail	1.2 Fail	—	1.4 Fail
2.4 Fail	2.1 Fail	1.7 Fail	1.4 Fail	—

White BG

1.4Fail

1.6Fail

2.0Fail

2.3Fail

3.3AA Large

Black BG

15.1AAA

13.1AAA

10.7AAA

9.2AAA

6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D7E7

C4C5E4

ACADED

A1A1D7

8585B2

Deuteranopia

D6D5E6

C4C3E2

ACABE9

A1A0D3

8483AF

Tritanopia

D3E4E3

BFDEDD

A7DFDC

9DCBC9

81A8A6

Achromatopsia

DADADA

CCCCCC

B9B9B9

ABABAB

8E8E8E

Shades & Tints Shades & Tints

#D3DBEB

Dark

Light

#BECDEB

Dark

Light

#A6B5FF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3dbeb;
  --color-2: #becdeb;
  --color-3: #a6b5ff;
  --color-4: #9ca8e6;
  --color-5: #808bbf;
}

SCSS

$color-1: #d3dbeb;
$color-2: #becdeb;
$color-3: #a6b5ff;
$color-4: #9ca8e6;
$color-5: #808bbf;

TAILWIND

colors: {
  'brand-1': '#d3dbeb',
  'brand-2': '#becdeb',
  'brand-3': '#a6b5ff',
  'brand-4': '#9ca8e6',
  'brand-5': '#808bbf',
}

RGB Array

[211, 219, 235], [190, 205, 235], [166, 181, 255], [156, 168, 230], [128, 139, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3DBEB, #BECDEB, #A6B5FF, #9CA8E6, #808BBF 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: #d3dbeb; --color-2: #becdeb; --color-3: #a6b5ff; --color-4: #9ca8e6; --color-5: #808bbf. 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