← Back to Editor

#D7E3F6 · #CBDBF3 · #97A0B3 · #C7D3E6 · #929CAD

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D7E3F6

Azure · Lavender · Sky Blue

HEX
#D7E3F6
RGB
rgb(215, 227, 246)
HSL
hsl(217, 63%, 90%)
HSB
hsb(217, 13%, 96%)
CMYK
cmyk(13%, 8%, 0%, 4%)
Oklch
oklch(91.3% 0.029 259.6)

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

#CBDBF3

Azure · Lavender · Sky Blue

HEX
#CBDBF3
RGB
rgb(203, 219, 243)
HSL
hsl(216, 62%, 87%)
HSB
hsb(216, 16%, 95%)
CMYK
cmyk(16%, 10%, 0%, 5%)
Oklch
oklch(88.7% 0.037 258.4)

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

#97A0B3

Azure · DarkGray · Cobalt Blue

HEX
#97A0B3
RGB
rgb(151, 160, 179)
HSL
hsl(221, 16%, 65%)
HSB
hsb(221, 16%, 70%)
CMYK
cmyk(16%, 11%, 0%, 30%)
Oklch
oklch(70.5% 0.030 265.4)

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

#C7D3E6

Azure · LightGray · Sky Blue

HEX
#C7D3E6
RGB
rgb(199, 211, 230)
HSL
hsl(217, 38%, 84%)
HSB
hsb(217, 13%, 90%)
CMYK
cmyk(13%, 8%, 0%, 10%)
Oklch
oklch(86.4% 0.029 259.6)

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

#929CAD

Azure · DarkGray · Cobalt Blue

HEX
#929CAD
RGB
rgb(146, 156, 173)
HSL
hsl(218, 14%, 63%)
HSB
hsb(218, 16%, 68%)
CMYK
cmyk(16%, 10%, 0%, 32%)
Oklch
oklch(69.0% 0.027 261.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7E3F6
F6E9D5

Analogous

D5F2F6
D7E3F6
D9D5F6

Triadic

D7E3F6
F6D5E2
E2F6D5

Split-Comp.

D7E3F6
F6D9D5
F2F6D5

Tetradic

D7E3F6
F6D5F2
F6E9D5
D5F6D9

Contrast Matrix WCAG 2.1 Contrast

D7E3F6
CBDBF3
97A0B3
C7D3E6
929CAD
—
1.1
Fail
2.0
Fail
1.2
Fail
2.1
Fail
1.1
Fail
—
1.9
Fail
1.1
Fail
2.0
Fail
2.0
Fail
1.9
Fail
—
1.7
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.7
Fail
—
1.8
Fail
2.1
Fail
2.0
Fail
1.1
Fail
1.8
Fail
—
White BG
1.3Fail
1.4Fail
2.6Fail
1.5Fail
2.8Fail
Black BG
16.2AAA
15.0AAA
8.0AAA
13.9AAA
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCF1
D2D2ED
9B9BAE
CCCCE1
9696A9

Deuteranopia

DCDBF0
D1D0EC
9A9AAD
CCCBE0
9695A8

Tritanopia

D8EEED
CCE9E8
97ABAA
C8DEDD
93A6A5

Achromatopsia

E2E2E2
D9D9D9
9F9F9F
D2D2D2
9B9B9B

Shades & Tints Shades & Tints

#D7E3F6

Dark
Light

#CBDBF3

Dark
Light

#97A0B3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7e3f6;
  --color-2: #cbdbf3;
  --color-3: #97a0b3;
  --color-4: #c7d3e6;
  --color-5: #929cad;
}

SCSS

$color-1: #d7e3f6;
$color-2: #cbdbf3;
$color-3: #97a0b3;
$color-4: #c7d3e6;
$color-5: #929cad;

TAILWIND

colors: {
  'brand-1': '#d7e3f6',
  'brand-2': '#cbdbf3',
  'brand-3': '#97a0b3',
  'brand-4': '#c7d3e6',
  'brand-5': '#929cad',
}

RGB Array

[215, 227, 246], [203, 219, 243], [151, 160, 179], [199, 211, 230], [146, 156, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D7E3F6, #CBDBF3, #97A0B3, #C7D3E6, #929CAD 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: #d7e3f6; --color-2: #cbdbf3; --color-3: #97a0b3; --color-4: #c7d3e6; --color-5: #929cad. 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