#86A5DA + #9FBFDF + #EEF3FF + #CCE1DE + #CABCDC · minimal - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

RestrainedProfessionalPureCool

Industry INDUSTRY

ArchitectureManufacturingSaaS B2B

UI Context UI CONTEXT

Corporate SitePortfolioAdmin Panel

Color Details Color Details

#86A5DA

Azure · CornflowerBlue · Cobalt Blue

HEX

#86A5DA

RGB

rgb(134, 165, 218)

HSL

hsl(218, 53%, 69%)

HSB

hsb(218, 39%, 85%)

CMYK

cmyk(39%, 24%, 0%, 15%)

Oklch

oklch(71.9% 0.085 260.9)

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

#9FBFDF

Azure · LightSteelBlue · Cobalt Blue

HEX

#9FBFDF

RGB

rgb(159, 191, 223)

HSL

hsl(210, 50%, 75%)

HSB

hsb(210, 29%, 87%)

CMYK

cmyk(29%, 14%, 0%, 13%)

Oklch

oklch(79.2% 0.057 248.6)

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

#EEF3FF

Azure · Lavender · Sky Blue

HEX

#EEF3FF

RGB

rgb(238, 243, 255)

HSL

hsl(222, 100%, 97%)

HSB

hsb(222, 7%, 100%)

CMYK

cmyk(7%, 5%, 0%, 0%)

Oklch

oklch(96.4% 0.017 267.8)

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

#CCE1DE

Jade · LightGray · Glacier Blue

HEX

#CCE1DE

RGB

rgb(204, 225, 222)

HSL

hsl(171, 26%, 84%)

HSB

hsb(171, 9%, 88%)

CMYK

cmyk(9%, 0%, 1%, 12%)

Oklch

oklch(89.3% 0.023 186.4)

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

#CABCDC

Wisteria · LightGray · Lilac Purple

HEX

#CABCDC

RGB

rgb(202, 188, 220)

HSL

hsl(266, 31%, 80%)

HSB

hsb(266, 15%, 86%)

CMYK

cmyk(8%, 15%, 0%, 14%)

Oklch

oklch(81.7% 0.047 305.2)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86A5DA

DABB86

Analogous

86CFDA

86A5DA

9186DA

Triadic

86A5DA

DA86A5

A5DA86

Split-Comp.

86A5DA

DA9186

CFDA86

Tetradic

86A5DA

DA86CF

DABB86

86DA91

Contrast Matrix WCAG 2.1 Contrast

86A5DA	9FBFDF	EEF3FF	CCE1DE	CABCDC
—	1.3 Fail	2.2 Fail	1.8 Fail	1.4 Fail
1.3 Fail	—	1.7 Fail	1.4 Fail	1.1 Fail
2.2 Fail	1.7 Fail	—	1.2 Fail	1.6 Fail
1.8 Fail	1.4 Fail	1.2 Fail	—	1.3 Fail
1.4 Fail	1.1 Fail	1.6 Fail	1.3 Fail	—

White BG

2.5Fail

1.9Fail

1.1Fail

1.4Fail

1.8Fail

Black BG

8.4AAA

11.0AAA

18.9AAA

15.4AAA

11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9394CD

ADADD7

F0F0FC

D5D5DF

C4C4D4

Deuteranopia

928FCA

ABA9D5

F0F0FB

D4D2DF

C5C6D2

Tritanopia

88C3C1

A1D1D0

EEFAF9

CDDFDF

C9CECD

Achromatopsia

A2A2A2

B9B9B9

F3F3F3

DADADA

C4C4C4

Shades & Tints Shades & Tints

#86A5DA

Dark

Light

#9FBFDF

Dark

Light

#EEF3FF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86a5da;
  --color-2: #9fbfdf;
  --color-3: #eef3ff;
  --color-4: #cce1de;
  --color-5: #cabcdc;
}

SCSS

$color-1: #86a5da;
$color-2: #9fbfdf;
$color-3: #eef3ff;
$color-4: #cce1de;
$color-5: #cabcdc;

TAILWIND

colors: {
  'brand-1': '#86a5da',
  'brand-2': '#9fbfdf',
  'brand-3': '#eef3ff',
  'brand-4': '#cce1de',
  'brand-5': '#cabcdc',
}

RGB Array

[134, 165, 218], [159, 191, 223], [238, 243, 255], [204, 225, 222], [202, 188, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This minimal-style palette of #86A5DA, #9FBFDF, #EEF3FF, #CCE1DE, #CABCDC 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: #86a5da; --color-2: #9fbfdf; --color-3: #eef3ff; --color-4: #cce1de; --color-5: #cabcdc. 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 minimal-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