← Back to Editor

#B3DAE1 · #92CDD5 · #6BC2D1 · #57B8C9 · #42A8BE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B3DAE1

Sky Blue · LightBlue · Glacier Blue

HEX
#B3DAE1
RGB
rgb(179, 218, 225)
HSL
hsl(189, 43%, 79%)
HSB
hsb(189, 20%, 88%)
CMYK
cmyk(20%, 3%, 0%, 12%)
Oklch
oklch(86.3% 0.042 209.7)

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

#92CDD5

Sky Blue · SkyBlue · Lake Green

HEX
#92CDD5
RGB
rgb(146, 205, 213)
HSL
hsl(187, 44%, 70%)
HSB
hsb(187, 31%, 84%)
CMYK
cmyk(31%, 4%, 0%, 16%)
Oklch
oklch(81.1% 0.061 206.6)

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

#6BC2D1

Sky Blue · MediumTurquoise · Lake Green

HEX
#6BC2D1
RGB
rgb(107, 194, 209)
HSL
hsl(189, 53%, 62%)
HSB
hsb(189, 49%, 82%)
CMYK
cmyk(49%, 7%, 0%, 18%)
Oklch
oklch(76.5% 0.087 209.9)

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

#57B8C9

Lake Blue · MediumTurquoise · Lake Green

HEX
#57B8C9
RGB
rgb(87, 184, 201)
HSL
hsl(189, 51%, 56%)
HSB
hsb(189, 57%, 79%)
CMYK
cmyk(57%, 8%, 0%, 21%)
Oklch
oklch(73.1% 0.094 210.6)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#42A8BE

Slate Blue · SteelBlue · Mint Ice

HEX
#42A8BE
RGB
rgb(66, 168, 190)
HSL
hsl(191, 49%, 50%)
HSB
hsb(191, 65%, 75%)
CMYK
cmyk(65%, 12%, 0%, 25%)
Oklch
oklch(68.1% 0.098 214.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3DAE1
E0B9B2

Analogous

B2E0D0
B3DAE1
B2C3E0

Triadic

B3DAE1
E0B2DA
DAE0B2

Split-Comp.

B3DAE1
E0B2C3
E0D0B2

Tetradic

B3DAE1
D0B2E0
E0B9B2
C3E0B2

Contrast Matrix WCAG 2.1 Contrast

B3DAE1
92CDD5
6BC2D1
57B8C9
42A8BE
—
1.2
Fail
1.4
Fail
1.5
Fail
1.9
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.4
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.9
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
White BG
1.5Fail
1.8Fail
2.0Fail
2.3Fail
2.8Fail
Black BG
14.0AAA
11.9AAA
10.3AAA
9.1AAA
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C4DF
ACACD3
9191CD
8182C5
6E6FB9

Deuteranopia

C2BFDF
A8A4D3
8C85CC
7B74C4
6861B7

Tritanopia

B5DEDE
95D2D1
6FCBCA
5CC2C1
47B4B4

Achromatopsia

CFCFCF
BCBCBC
AAAAAA
9D9D9D
8C8C8C

Shades & Tints Shades & Tints

#B3DAE1

Dark
Light

#92CDD5

Dark
Light

#6BC2D1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3dae1;
  --color-2: #92cdd5;
  --color-3: #6bc2d1;
  --color-4: #57b8c9;
  --color-5: #42a8be;
}

SCSS

$color-1: #b3dae1;
$color-2: #92cdd5;
$color-3: #6bc2d1;
$color-4: #57b8c9;
$color-5: #42a8be;

TAILWIND

colors: {
  'brand-1': '#b3dae1',
  'brand-2': '#92cdd5',
  'brand-3': '#6bc2d1',
  'brand-4': '#57b8c9',
  'brand-5': '#42a8be',
}

RGB Array

[179, 218, 225], [146, 205, 213], [107, 194, 209], [87, 184, 201], [66, 168, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3DAE1, #92CDD5, #6BC2D1, #57B8C9, #42A8BE is ideal for: corporate websites, product showcases, portfolios. 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: #b3dae1; --color-2: #92cdd5; --color-3: #6bc2d1; --color-4: #57b8c9; --color-5: #42a8be. 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. 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