← Back to Editor

#D4D7E6 · #ABBDDB · #698EB8 · #617282 · #736960

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

#D4D7E6

Azure · LightGray · Sky Blue

HEX
#D4D7E6
RGB
rgb(212, 215, 230)
HSL
hsl(230, 26%, 87%)
HSB
hsb(230, 8%, 90%)
CMYK
cmyk(8%, 7%, 0%, 10%)
Oklch
oklch(88.1% 0.021 276.9)

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

#ABBDDB

Azure · LightSteelBlue · Cobalt Blue

HEX
#ABBDDB
RGB
rgb(171, 189, 219)
HSL
hsl(218, 40%, 76%)
HSB
hsb(218, 22%, 86%)
CMYK
cmyk(22%, 14%, 0%, 14%)
Oklch
oklch(79.5% 0.047 260.7)

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

#698EB8

Azure · CadetBlue · Navy Blue

HEX
#698EB8
RGB
rgb(105, 142, 184)
HSL
hsl(212, 36%, 57%)
HSB
hsb(212, 43%, 72%)
CMYK
cmyk(43%, 23%, 0%, 28%)
Oklch
oklch(63.6% 0.076 252.1)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#617282

Slate Blue · SlateGray · Navy Blue

HEX
#617282
RGB
rgb(97, 114, 130)
HSL
hsl(209, 15%, 45%)
HSB
hsb(209, 25%, 51%)
CMYK
cmyk(25%, 12%, 0%, 49%)
Oklch
oklch(54.4% 0.032 246.8)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#736960

Tangerine · DimGray · Warm Gray

HEX
#736960
RGB
rgb(115, 105, 96)
HSL
hsl(28, 9%, 41%)
HSB
hsb(28, 17%, 45%)
CMYK
cmyk(0%, 9%, 17%, 55%)
Oklch
oklch(52.7% 0.019 64.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4D7E6
E6E4D5

Analogous

D5E1E6
D4D7E6
DBD5E6

Triadic

D4D7E6
E6D5D8
D8E6D5

Split-Comp.

D4D7E6
E6DBD5
E1E6D5

Tetradic

D4D7E6
E6D5E1
E6E4D5
D5E6DB

Contrast Matrix WCAG 2.1 Contrast

D4D7E6
ABBDDB
698EB8
617282
736960
—
1.3
Fail
2.4
Fail
3.5
AA Large
3.7
AA Large
1.3
Fail
—
1.8
Fail
2.6
Fail
2.8
Fail
2.4
Fail
1.8
Fail
—
1.5
Fail
1.6
Fail
3.5
AA Large
2.6
Fail
1.5
Fail
—
1.1
Fail
3.7
AA Large
2.8
Fail
1.6
Fail
1.1
Fail
—
White BG
1.4Fail
1.9Fail
3.4AA Large
5.0AA
5.4AA
Black BG
14.7AAA
11.0AAA
6.2AA
4.2AA Large
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5E2
B3B3D4
7979AE
68697E
6F6F62

Deuteranopia

D5D5E2
B2B0D2
7774AB
67667D
6F7063

Tritanopia

D4E0DF
ACCECD
6BA6A4
627B7A
736464

Achromatopsia

D8D8D8
BBBBBB
888888
6F6F6F
6B6B6B

Shades & Tints Shades & Tints

#D4D7E6

Dark
Light

#ABBDDB

Dark
Light

#698EB8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4d7e6;
  --color-2: #abbddb;
  --color-3: #698eb8;
  --color-4: #617282;
  --color-5: #736960;
}

SCSS

$color-1: #d4d7e6;
$color-2: #abbddb;
$color-3: #698eb8;
$color-4: #617282;
$color-5: #736960;

TAILWIND

colors: {
  'brand-1': '#d4d7e6',
  'brand-2': '#abbddb',
  'brand-3': '#698eb8',
  'brand-4': '#617282',
  'brand-5': '#736960',
}

RGB Array

[212, 215, 230], [171, 189, 219], [105, 142, 184], [97, 114, 130], [115, 105, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4D7E6, #ABBDDB, #698EB8, #617282, #736960 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: #d4d7e6; --color-2: #abbddb; --color-3: #698eb8; --color-4: #617282; --color-5: #736960. 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 general-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