#B3CEE8 + #A4C3E0 + #93AFCC + #FCFBE6 + #789FC4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B3CEE8

Sky Blue · LightBlue · Sky Blue

HEX

#B3CEE8

RGB

rgb(179, 206, 232)

HSL

hsl(209, 54%, 81%)

HSB

hsb(209, 23%, 91%)

CMYK

cmyk(23%, 11%, 0%, 9%)

Oklch

oklch(84.0% 0.047 247.4)

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

#A4C3E0

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#A4C3E0

RGB

rgb(164, 195, 224)

HSL

hsl(209, 49%, 76%)

HSB

hsb(209, 27%, 88%)

CMYK

cmyk(27%, 13%, 0%, 12%)

Oklch

oklch(80.4% 0.053 246.7)

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

#93AFCC

Azure · LightSteelBlue · Cobalt Blue

HEX

#93AFCC

RGB

rgb(147, 175, 204)

HSL

hsl(211, 36%, 69%)

HSB

hsb(211, 28%, 80%)

CMYK

cmyk(28%, 14%, 0%, 20%)

Oklch

oklch(74.3% 0.052 249.4)

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

#FCFBE6

Fresh Green · LightYellow · Lemon Cream

HEX

#FCFBE6

RGB

rgb(252, 251, 230)

HSL

hsl(57, 79%, 95%)

HSB

hsb(57, 9%, 99%)

CMYK

cmyk(0%, 0%, 9%, 1%)

Oklch

oklch(98.3% 0.027 104.7)

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

#789FC4

Sky Blue · CadetBlue · Cobalt Blue

HEX

#789FC4

RGB

rgb(120, 159, 196)

HSL

hsl(209, 39%, 62%)

HSB

hsb(209, 39%, 77%)

CMYK

cmyk(39%, 19%, 0%, 23%)

Oklch

oklch(68.8% 0.070 247.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3CEE8

E9CEB4

Analogous

B4E9E8

B3CEE8

B4B5E9

Triadic

B3CEE8

E9B4CF

CFE9B4

Split-Comp.

B3CEE8

E9B4B5

E9E8B4

Tetradic

B3CEE8

E8B4E9

E9CEB4

B5E9B4

Contrast Matrix WCAG 2.1 Contrast

B3CEE8	A4C3E0	93AFCC	FCFBE6	789FC4
—	1.1 Fail	1.4 Fail	1.6 Fail	1.7 Fail
1.1 Fail	—	1.2 Fail	1.8 Fail	1.5 Fail
1.4 Fail	1.2 Fail	—	2.2 Fail	1.2 Fail
1.6 Fail	1.8 Fail	2.2 Fail	—	2.7 Fail
1.7 Fail	1.5 Fail	1.2 Fail	2.7 Fail	—

White BG

1.6Fail

1.8Fail

2.3Fail

1.0Fail

2.8Fail

Black BG

12.9AAA

11.5AAA

9.2AAA

20.1AAA

7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFE2

B1B2D9

9F9FC5

FCFCEB

8989BB

Deuteranopia

BDBBE0

B0ADD7

9E9BC3

FCFCEC

8784B9

Tritanopia

B4DDDC

A6D3D2

94BFBE

FCEFF0

7AB4B2

Achromatopsia

C9C9C9

BDBDBD

AAAAAA

F9F9F9

989898

Shades & Tints Shades & Tints

#B3CEE8

Dark

Light

#A4C3E0

Dark

Light

#93AFCC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3cee8;
  --color-2: #a4c3e0;
  --color-3: #93afcc;
  --color-4: #fcfbe6;
  --color-5: #789fc4;
}

SCSS

$color-1: #b3cee8;
$color-2: #a4c3e0;
$color-3: #93afcc;
$color-4: #fcfbe6;
$color-5: #789fc4;

TAILWIND

colors: {
  'brand-1': '#b3cee8',
  'brand-2': '#a4c3e0',
  'brand-3': '#93afcc',
  'brand-4': '#fcfbe6',
  'brand-5': '#789fc4',
}

RGB Array

[179, 206, 232], [164, 195, 224], [147, 175, 204], [252, 251, 230], [120, 159, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3CEE8, #A4C3E0, #93AFCC, #FCFBE6, #789FC4 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: #b3cee8; --color-2: #a4c3e0; --color-3: #93afcc; --color-4: #fcfbe6; --color-5: #789fc4. 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