#78D0FF + #9FBCC5 + #B4CFDB + #E3E3E3 + #FFDEDE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#78D0FF

Sky Blue · LightSkyBlue · Cobalt Blue

HEX

#78D0FF

RGB

rgb(120, 208, 255)

HSL

hsl(201, 100%, 74%)

HSB

hsb(201, 53%, 100%)

CMYK

cmyk(53%, 18%, 0%, 0%)

Oklch

oklch(82.0% 0.108 233.5)

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

#9FBCC5

Sky Blue · LightSteelBlue · Lake Green

HEX

#9FBCC5

RGB

rgb(159, 188, 197)

HSL

hsl(194, 25%, 70%)

HSB

hsb(194, 19%, 77%)

CMYK

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

Oklch

oklch(77.6% 0.034 218.5)

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

#B4CFDB

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#B4CFDB

RGB

rgb(180, 207, 219)

HSL

hsl(198, 35%, 78%)

HSB

hsb(198, 18%, 86%)

CMYK

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

Oklch

oklch(83.8% 0.034 226.4)

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

#E3E3E3

Plain White · Lavender · Cloud White

HEX

#E3E3E3

RGB

rgb(227, 227, 227)

HSL

hsl(0, 0%, 89%)

HSB

hsb(0, 0%, 89%)

CMYK

cmyk(0%, 0%, 0%, 11%)

Oklch

oklch(91.6% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#FFDEDE

Peach Pink · Linen · Cherry Blossom

HEX

#FFDEDE

RGB

rgb(255, 222, 222)

HSL

hsl(0, 100%, 94%)

HSB

hsb(0, 13%, 100%)

CMYK

cmyk(0%, 13%, 13%, 0%)

Oklch

oklch(92.8% 0.037 17.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

78D0FF

FFA97A

Analogous

7AFFEB

78D0FF

7A8EFF

Triadic

78D0FF

FF7AD1

D1FF7A

Split-Comp.

78D0FF

FF7A8E

FFEB7A

Tetradic

78D0FF

EB7AFF

FFA97A

8EFF7A

Contrast Matrix WCAG 2.1 Contrast

78D0FF	9FBCC5	B4CFDB	E3E3E3	FFDEDE
—	1.2 Fail	1.1 Fail	1.3 Fail	1.4 Fail
1.2 Fail	—	1.2 Fail	1.6 Fail	1.6 Fail
1.1 Fail	1.2 Fail	—	1.3 Fail	1.3 Fail
1.3 Fail	1.6 Fail	1.3 Fail	—	1.0 Fail
1.4 Fail	1.6 Fail	1.3 Fail	1.0 Fail	—

White BG

1.7Fail

2.0Fail

1.6Fail

1.3Fail

Black BG

12.3AAA

10.5AAA

12.9AAA

16.4AAA

16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9FF4

ACACC3

C0C0D8

E3E3E3

F1F0DE

Deuteranopia

9992F1

AAA8C2

BEBCD7

E3E3E3

F3F5DE

Tritanopia

7CEBE9

A0C1C1

B5D6D5

E3E3E3

FDDEDE

Achromatopsia

BBBBBB

B4B4B4

C8C8C8

E3E3E3

E8E8E8

Shades & Tints Shades & Tints

#78D0FF

Dark

Light

#9FBCC5

Dark

Light

#B4CFDB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #78d0ff;
  --color-2: #9fbcc5;
  --color-3: #b4cfdb;
  --color-4: #e3e3e3;
  --color-5: #ffdede;
}

SCSS

$color-1: #78d0ff;
$color-2: #9fbcc5;
$color-3: #b4cfdb;
$color-4: #e3e3e3;
$color-5: #ffdede;

TAILWIND

colors: {
  'brand-1': '#78d0ff',
  'brand-2': '#9fbcc5',
  'brand-3': '#b4cfdb',
  'brand-4': '#e3e3e3',
  'brand-5': '#ffdede',
}

RGB Array

[120, 208, 255], [159, 188, 197], [180, 207, 219], [227, 227, 227], [255, 222, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #78D0FF, #9FBCC5, #B4CFDB, #E3E3E3, #FFDEDE 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: #78d0ff; --color-2: #9fbcc5; --color-3: #b4cfdb; --color-4: #e3e3e3; --color-5: #ffdede. 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