#62CBD9 + #D6D6D6 + #C1D0D9 + #B8D0DB + #ABCEDE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#62CBD9

Sky Blue · MediumTurquoise · Lake Green

HEX

#62CBD9

RGB

rgb(98, 203, 217)

HSL

hsl(187, 61%, 62%)

HSB

hsb(187, 55%, 85%)

CMYK

cmyk(55%, 6%, 0%, 15%)

Oklch

oklch(78.5% 0.099 207.0)

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

#D6D6D6

Silver Gray · LightGray · Pearl Gray

HEX

#D6D6D6

RGB

rgb(214, 214, 214)

HSL

hsl(0, 0%, 84%)

HSB

hsb(0, 0%, 84%)

CMYK

cmyk(0%, 0%, 0%, 16%)

Oklch

oklch(87.6% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#C1D0D9

Sky Blue · LightGray · Cobalt Blue

HEX

#C1D0D9

RGB

rgb(193, 208, 217)

HSL

hsl(203, 24%, 80%)

HSB

hsb(203, 11%, 85%)

CMYK

cmyk(11%, 4%, 0%, 15%)

Oklch

oklch(84.9% 0.021 233.9)

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

#B8D0DB

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#B8D0DB

RGB

rgb(184, 208, 219)

HSL

hsl(199, 33%, 79%)

HSB

hsb(199, 16%, 86%)

CMYK

cmyk(16%, 5%, 0%, 14%)

Oklch

oklch(84.3% 0.030 227.1)

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

#ABCEDE

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#ABCEDE

RGB

rgb(171, 206, 222)

HSL

hsl(199, 44%, 77%)

HSB

hsb(199, 23%, 87%)

CMYK

cmyk(23%, 7%, 0%, 13%)

Oklch

oklch(83.1% 0.043 227.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

62CBD9

D97163

Analogous

63D9AC

62CBD9

6390D9

Triadic

62CBD9

D963CB

CBD963

Split-Comp.

62CBD9

D96390

D9AC63

Tetradic

62CBD9

AC63D9

D97163

90D963

Contrast Matrix WCAG 2.1 Contrast

62CBD9	D6D6D6	C1D0D9	B8D0DB	ABCEDE
—	1.3 Fail	1.2 Fail	1.2 Fail	1.1 Fail
1.3 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.9Fail

1.5Fail

1.6Fail

1.7Fail

Black BG

11.1AAA

14.4AAA

13.3AAA

13.1AAA

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F90D6

D6D6D6

C7C8D7

C2C3D8

BABADA

Deuteranopia

8982D5

D6D6D6

C7C6D6

C1BFD8

B8B6D9

Tritanopia

67D3D2

D6D6D6

C2D5D5

B9D6D6

ADD7D6

Achromatopsia

ADADAD

D6D6D6

CDCDCD

CACACA

C5C5C5

Shades & Tints Shades & Tints

#62CBD9

Dark

Light

#D6D6D6

Dark

Light

#C1D0D9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #62cbd9;
  --color-2: #d6d6d6;
  --color-3: #c1d0d9;
  --color-4: #b8d0db;
  --color-5: #abcede;
}

SCSS

$color-1: #62cbd9;
$color-2: #d6d6d6;
$color-3: #c1d0d9;
$color-4: #b8d0db;
$color-5: #abcede;

TAILWIND

colors: {
  'brand-1': '#62cbd9',
  'brand-2': '#d6d6d6',
  'brand-3': '#c1d0d9',
  'brand-4': '#b8d0db',
  'brand-5': '#abcede',
}

RGB Array

[98, 203, 217], [214, 214, 214], [193, 208, 217], [184, 208, 219], [171, 206, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #62CBD9, #D6D6D6, #C1D0D9, #B8D0DB, #ABCEDE 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: #62cbd9; --color-2: #d6d6d6; --color-3: #c1d0d9; --color-4: #b8d0db; --color-5: #abcede. 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