← Back to Editor

#BCE6E2 · #9AE5E8 · #9CDBE2 · #A2CAD2 · #3E7987

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

WorkspaceReadingData Visualization

Color Details Color Details

#BCE6E2

Jade · LightBlue · Glacier Blue

HEX
#BCE6E2
RGB
rgb(188, 230, 226)
HSL
hsl(174, 46%, 82%)
HSB
hsb(174, 18%, 90%)
CMYK
cmyk(18%, 0%, 2%, 10%)
Oklch
oklch(89.4% 0.044 189.3)

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

#9AE5E8

Sky Blue · LightBlue · Glacier Blue

HEX
#9AE5E8
RGB
rgb(154, 229, 232)
HSL
hsl(182, 63%, 76%)
HSB
hsb(182, 34%, 91%)
CMYK
cmyk(34%, 1%, 0%, 9%)
Oklch
oklch(87.4% 0.074 199.1)

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

#9CDBE2

Sky Blue · LightBlue · Lake Green

HEX
#9CDBE2
RGB
rgb(156, 219, 226)
HSL
hsl(186, 55%, 75%)
HSB
hsb(186, 31%, 89%)
CMYK
cmyk(31%, 3%, 0%, 11%)
Oklch
oklch(85.1% 0.064 204.7)

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

#A2CAD2

Sky Blue · LightSteelBlue · Lake Green

HEX
#A2CAD2
RGB
rgb(162, 202, 210)
HSL
hsl(190, 35%, 73%)
HSB
hsb(190, 23%, 82%)
CMYK
cmyk(23%, 4%, 0%, 18%)
Oklch
oklch(81.3% 0.044 211.2)

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

#3E7987

Slate Blue · SteelBlue · Mint Ice

HEX
#3E7987
RGB
rgb(62, 121, 135)
HSL
hsl(192, 37%, 39%)
HSB
hsb(192, 54%, 53%)
CMYK
cmyk(54%, 10%, 0%, 47%)
Oklch
oklch(54.2% 0.065 215.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BCE6E2
E6BCC0

Analogous

BCE6CD
BCE6E2
BCD5E6

Triadic

BCE6E2
E2BCE6
E6E2BC

Split-Comp.

BCE6E2
E6BCD5
E6CDBC

Tetradic

BCE6E2
CDBCE6
E6BCC0
D5E6BC

Contrast Matrix WCAG 2.1 Contrast

BCE6E2
9AE5E8
9CDBE2
A2CAD2
3E7987
—
1.1
Fail
1.1
Fail
1.3
Fail
3.6
AA Large
1.1
Fail
—
1.1
Fail
1.2
Fail
3.4
AA Large
1.1
Fail
1.1
Fail
—
1.1
Fail
3.2
AA Large
1.3
Fail
1.2
Fail
1.1
Fail
—
2.8
Fail
3.6
AA Large
3.4
AA Large
3.2
AA Large
2.8
Fail
—
White BG
1.4Fail
1.4Fail
1.5Fail
1.8Fail
4.9AA
Black BG
15.6AAA
14.7AAA
13.6AAA
11.9AAA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECFE3
BABBE7
B7B8E0
B3B4D0
585884

Deuteranopia

CCC9E3
B6B1E7
B4AFE0
B1AED0
545083

Tritanopia

BEE4E4
9EE7E7
9FDFDF
A4CFCE
418180

Achromatopsia

D9D9D9
CFCFCF
C9C9C9
BFBFBF
696969

Shades & Tints Shades & Tints

#BCE6E2

Dark
Light

#9AE5E8

Dark
Light

#9CDBE2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bce6e2;
  --color-2: #9ae5e8;
  --color-3: #9cdbe2;
  --color-4: #a2cad2;
  --color-5: #3e7987;
}

SCSS

$color-1: #bce6e2;
$color-2: #9ae5e8;
$color-3: #9cdbe2;
$color-4: #a2cad2;
$color-5: #3e7987;

TAILWIND

colors: {
  'brand-1': '#bce6e2',
  'brand-2': '#9ae5e8',
  'brand-3': '#9cdbe2',
  'brand-4': '#a2cad2',
  'brand-5': '#3e7987',
}

RGB Array

[188, 230, 226], [154, 229, 232], [156, 219, 226], [162, 202, 210], [62, 121, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BCE6E2, #9AE5E8, #9CDBE2, #A2CAD2, #3E7987 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: #bce6e2; --color-2: #9ae5e8; --color-3: #9cdbe2; --color-4: #a2cad2; --color-5: #3e7987. 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