#CBF7FA + #63D1E0 + #76BFCE + #86A9AB + #A5A8D9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CBF7FA

Sky Blue · Lavender · Glacier Blue

HEX

#CBF7FA

RGB

rgb(203, 247, 250)

HSL

hsl(184, 82%, 89%)

HSB

hsb(184, 19%, 98%)

CMYK

cmyk(19%, 1%, 0%, 2%)

Oklch

oklch(94.6% 0.045 201.5)

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

#63D1E0

Sky Blue · MediumTurquoise · Lake Green

HEX

#63D1E0

RGB

rgb(99, 209, 224)

HSL

hsl(187, 67%, 63%)

HSB

hsb(187, 56%, 88%)

CMYK

cmyk(56%, 7%, 0%, 12%)

Oklch

oklch(80.2% 0.102 207.3)

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

#76BFCE

Sky Blue · SkyBlue · Lake Green

HEX

#76BFCE

RGB

rgb(118, 191, 206)

HSL

hsl(190, 47%, 64%)

HSB

hsb(190, 43%, 81%)

CMYK

cmyk(43%, 7%, 0%, 19%)

Oklch

oklch(76.2% 0.076 212.2)

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

#86A9AB

Slate Blue · DarkSeaGreen · Lake Green

HEX

#86A9AB

RGB

rgb(134, 169, 171)

HSL

hsl(183, 18%, 60%)

HSB

hsb(183, 22%, 67%)

CMYK

cmyk(22%, 1%, 0%, 33%)

Oklch

oklch(71.0% 0.038 200.7)

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

#A5A8D9

Azure · LightSteelBlue · Cobalt Blue

HEX

#A5A8D9

RGB

rgb(165, 168, 217)

HSL

hsl(237, 41%, 75%)

HSB

hsb(237, 24%, 85%)

CMYK

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

Oklch

oklch(74.6% 0.070 281.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CBF7FA

FACFCC

Analogous

CCFAE6

CBF7FA

CCE0FA

Triadic

CBF7FA

FACCF7

F7FACC

Split-Comp.

CBF7FA

FACCE0

FAE6CC

Tetradic

CBF7FA

E6CCFA

FACFCC

E0FACC

Contrast Matrix WCAG 2.1 Contrast

CBF7FA	63D1E0	76BFCE	86A9AB	A5A8D9
—	1.6 Fail	1.8 Fail	2.2 Fail	2.0 Fail
1.6 Fail	—	1.2 Fail	1.4 Fail	1.3 Fail
1.8 Fail	1.2 Fail	—	1.2 Fail	1.1 Fail
2.2 Fail	1.4 Fail	1.2 Fail	—	1.1 Fail
2.0 Fail	1.3 Fail	1.1 Fail	1.1 Fail	—

White BG

1.2Fail

1.8Fail

2.1Fail

2.5Fail

2.3Fail

Black BG

18.2AAA

11.7AAA

10.1AAA

8.3AAA

9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEF9

9394DC

9696CA

9595AB

A6A6CD

Deuteranopia

DCD8F9

8C84DB

918CCA

9391AA

A6A6CA

Tritanopia

CDF9F9

69DAD9

7AC8C7

88AAAA

A5C4C2

Achromatopsia

EAEAEA

B2B2B2

ABABAB

9F9F9F

ADADAD

Shades & Tints Shades & Tints

#CBF7FA

Dark

Light

#63D1E0

Dark

Light

#76BFCE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cbf7fa;
  --color-2: #63d1e0;
  --color-3: #76bfce;
  --color-4: #86a9ab;
  --color-5: #a5a8d9;
}

SCSS

$color-1: #cbf7fa;
$color-2: #63d1e0;
$color-3: #76bfce;
$color-4: #86a9ab;
$color-5: #a5a8d9;

TAILWIND

colors: {
  'brand-1': '#cbf7fa',
  'brand-2': '#63d1e0',
  'brand-3': '#76bfce',
  'brand-4': '#86a9ab',
  'brand-5': '#a5a8d9',
}

RGB Array

[203, 247, 250], [99, 209, 224], [118, 191, 206], [134, 169, 171], [165, 168, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CBF7FA, #63D1E0, #76BFCE, #86A9AB, #A5A8D9 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: #cbf7fa; --color-2: #63d1e0; --color-3: #76bfce; --color-4: #86a9ab; --color-5: #a5a8d9. 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