← Back to Editor

#86C8E0 · #C8D6E8 · #D1DDF6 · #F3E9F6 · #C1C4AE

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

#86C8E0

Sky Blue · SkyBlue · Lake Green

HEX
#86C8E0
RGB
rgb(134, 200, 224)
HSL
hsl(196, 59%, 70%)
HSB
hsb(196, 40%, 88%)
CMYK
cmyk(40%, 11%, 0%, 12%)
Oklch
oklch(79.7% 0.075 222.9)

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

#C8D6E8

Azure · LightGray · Sky Blue

HEX
#C8D6E8
RGB
rgb(200, 214, 232)
HSL
hsl(214, 41%, 85%)
HSB
hsb(214, 14%, 91%)
CMYK
cmyk(14%, 8%, 0%, 9%)
Oklch
oklch(87.1% 0.029 254.7)

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

#D1DDF6

Azure · Lavender · Sky Blue

HEX
#D1DDF6
RGB
rgb(209, 221, 246)
HSL
hsl(221, 67%, 89%)
HSB
hsb(221, 15%, 96%)
CMYK
cmyk(15%, 10%, 0%, 4%)
Oklch
oklch(89.6% 0.037 265.1)

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

#F3E9F6

Lilac · Lavender · Lavender

HEX
#F3E9F6
RGB
rgb(243, 233, 246)
HSL
hsl(286, 42%, 94%)
HSB
hsb(286, 5%, 96%)
CMYK
cmyk(1%, 5%, 0%, 4%)
Oklch
oklch(94.6% 0.020 318.4)

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

#C1C4AE

Fresh Green · Silver · Sunflower

HEX
#C1C4AE
RGB
rgb(193, 196, 174)
HSL
hsl(68, 16%, 73%)
HSB
hsb(68, 11%, 77%)
CMYK
cmyk(2%, 0%, 11%, 23%)
Oklch
oklch(81.2% 0.030 113.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86C8E0
E09D85

Analogous

85E0CB
86C8E0
859AE0

Triadic

86C8E0
E085C8
C8E085

Split-Comp.

86C8E0
E0859A
E0CB85

Tetradic

86C8E0
CB85E0
E09D85
9AE085

Contrast Matrix WCAG 2.1 Contrast

86C8E0
C8D6E8
D1DDF6
F3E9F6
C1C4AE
—
1.3
Fail
1.4
Fail
1.6
Fail
1.0
Fail
1.3
Fail
—
1.1
Fail
1.2
Fail
1.2
Fail
1.4
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.6
Fail
1.2
Fail
1.2
Fail
—
1.5
Fail
1.0
Fail
1.2
Fail
1.3
Fail
1.5
Fail
—
White BG
1.8Fail
1.5Fail
1.4Fail
1.2Fail
1.8Fail
Black BG
11.4AAA
14.2AAA
15.4AAA
17.8AAA
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A3DA
CECEE4
D6D6F0
EFEFF3
C2C2B3

Deuteranopia

9F9AD9
CDCCE3
D6D5EF
EFF0F2
C2C2B5

Tritanopia

89D6D5
C9E0DF
D2EBEA
F3F0F0
C1B8B8

Achromatopsia

B7B7B7
D4D4D4
DCDCDC
EDEDED
C1C1C1

Shades & Tints Shades & Tints

#86C8E0

Dark
Light

#C8D6E8

Dark
Light

#D1DDF6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86c8e0;
  --color-2: #c8d6e8;
  --color-3: #d1ddf6;
  --color-4: #f3e9f6;
  --color-5: #c1c4ae;
}

SCSS

$color-1: #86c8e0;
$color-2: #c8d6e8;
$color-3: #d1ddf6;
$color-4: #f3e9f6;
$color-5: #c1c4ae;

TAILWIND

colors: {
  'brand-1': '#86c8e0',
  'brand-2': '#c8d6e8',
  'brand-3': '#d1ddf6',
  'brand-4': '#f3e9f6',
  'brand-5': '#c1c4ae',
}

RGB Array

[134, 200, 224], [200, 214, 232], [209, 221, 246], [243, 233, 246], [193, 196, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86C8E0, #C8D6E8, #D1DDF6, #F3E9F6, #C1C4AE 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: #86c8e0; --color-2: #c8d6e8; --color-3: #d1ddf6; --color-4: #f3e9f6; --color-5: #c1c4ae. 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