← Back to Editor

#4D5594 · #8091AF · #A3CCD3 · #CBD9DA · #F6DDC7

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#4D5594

Indigo · DarkSlateBlue · Navy Blue

HEX
#4D5594
RGB
rgb(77, 85, 148)
HSL
hsl(233, 32%, 44%)
HSB
hsb(233, 48%, 58%)
CMYK
cmyk(48%, 43%, 0%, 42%)
Oklch
oklch(47.3% 0.102 276.3)

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

#8091AF

Azure · LightSlateGray · Navy Blue

HEX
#8091AF
RGB
rgb(128, 145, 175)
HSL
hsl(218, 23%, 59%)
HSB
hsb(218, 27%, 69%)
CMYK
cmyk(27%, 17%, 0%, 31%)
Oklch
oklch(65.4% 0.049 261.8)

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

#A3CCD3

Sky Blue · LightSteelBlue · Lake Green

HEX
#A3CCD3
RGB
rgb(163, 204, 211)
HSL
hsl(189, 35%, 73%)
HSB
hsb(189, 23%, 83%)
CMYK
cmyk(23%, 3%, 0%, 17%)
Oklch
oklch(81.8% 0.044 209.1)

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

#CBD9DA

Sky Blue · LightGray · Glacier Blue

HEX
#CBD9DA
RGB
rgb(203, 217, 218)
HSL
hsl(184, 17%, 83%)
HSB
hsb(184, 7%, 85%)
CMYK
cmyk(7%, 0%, 0%, 15%)
Oklch
oklch(87.5% 0.015 202.0)

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

#F6DDC7

Apricot · Bisque · Peach Orange

HEX
#F6DDC7
RGB
rgb(246, 221, 199)
HSL
hsl(28, 72%, 87%)
HSB
hsb(28, 19%, 96%)
CMYK
cmyk(0%, 10%, 19%, 4%)
Oklch
oklch(91.2% 0.040 63.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D5594
948C4C

Analogous

4C7994
4D5594
684C94

Triadic

4D5594
944C55
55944C

Split-Comp.

4D5594
94684C
79944C

Tetradic

4D5594
944C79
948C4C
4C9468

Contrast Matrix WCAG 2.1 Contrast

4D5594
8091AF
A3CCD3
CBD9DA
F6DDC7
—
2.2
Fail
4.0
AA Large
4.8
AA
5.3
AA
2.2
Fail
—
1.8
Fail
2.2
Fail
2.4
Fail
4.0
AA Large
1.8
Fail
—
1.2
Fail
1.3
Fail
4.8
AA
2.2
Fail
1.2
Fail
—
1.1
Fail
5.3
AA
2.4
Fail
1.3
Fail
1.1
Fail
—
White BG
6.9AA
3.2AA Large
1.7Fail
1.5Fail
1.3Fail
Black BG
3.0AA Large
6.6AA
12.1AAA
14.5AAA
16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

505185
8788A8
B5B5D1
D1D1DA
EBEBCC

Deuteranopia

504F81
8685A6
B2AFD1
D0CFDA
EDEFCE

Tritanopia

4D7976
81A2A1
A5D0D0
CCDADA
F5D1D1

Achromatopsia

5A5A5A
8F8F8F
C1C1C1
D5D5D5
E2E2E2

Shades & Tints Shades & Tints

#4D5594

Dark
Light

#8091AF

Dark
Light

#A3CCD3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d5594;
  --color-2: #8091af;
  --color-3: #a3ccd3;
  --color-4: #cbd9da;
  --color-5: #f6ddc7;
}

SCSS

$color-1: #4d5594;
$color-2: #8091af;
$color-3: #a3ccd3;
$color-4: #cbd9da;
$color-5: #f6ddc7;

TAILWIND

colors: {
  'brand-1': '#4d5594',
  'brand-2': '#8091af',
  'brand-3': '#a3ccd3',
  'brand-4': '#cbd9da',
  'brand-5': '#f6ddc7',
}

RGB Array

[77, 85, 148], [128, 145, 175], [163, 204, 211], [203, 217, 218], [246, 221, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D5594, #8091AF, #A3CCD3, #CBD9DA, #F6DDC7 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #4d5594; --color-2: #8091af; --color-3: #a3ccd3; --color-4: #cbd9da; --color-5: #f6ddc7. 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. 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. 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