#788A9E + #7BBBFF + #C9C9C9 + #FFC7F1 + #DFE8F2 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#788A9E

Azure · LightSlateGray · Navy Blue

HEX

#788A9E

RGB

rgb(120, 138, 158)

HSL

hsl(212, 16%, 55%)

HSB

hsb(212, 24%, 62%)

CMYK

cmyk(24%, 13%, 0%, 38%)

Oklch

oklch(62.6% 0.037 251.2)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#7BBBFF

Azure · LightSkyBlue · Cobalt Blue

HEX

#7BBBFF

RGB

rgb(123, 187, 255)

HSL

hsl(211, 100%, 74%)

HSB

hsb(211, 52%, 100%)

CMYK

cmyk(52%, 27%, 0%, 0%)

Oklch

oklch(77.6% 0.118 251.0)

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

#C9C9C9

Silver Gray · Silver · Pearl Gray

HEX

#C9C9C9

RGB

rgb(201, 201, 201)

HSL

hsl(0, 0%, 79%)

HSB

hsb(0, 0%, 79%)

CMYK

cmyk(0%, 0%, 0%, 21%)

Oklch

oklch(83.6% 0.000 89.9)

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

#FFC7F1

Mauve · Pink · Lavender

HEX

#FFC7F1

RGB

rgb(255, 199, 241)

HSL

hsl(315, 100%, 89%)

HSB

hsb(315, 22%, 100%)

CMYK

cmyk(0%, 22%, 5%, 0%)

Oklch

oklch(89.2% 0.083 335.4)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#DFE8F2

Azure · Lavender · Sky Blue

HEX

#DFE8F2

RGB

rgb(223, 232, 242)

HSL

hsl(212, 42%, 91%)

HSB

hsb(212, 8%, 95%)

CMYK

cmyk(8%, 4%, 0%, 5%)

Oklch

oklch(92.7% 0.017 250.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

788A9E

9F8D7A

Analogous

7A9D9F

788A9E

7B7A9F

Triadic

788A9E

9F7A8B

8B9F7A

Split-Comp.

788A9E

9F7B7A

9D9F7A

Tetradic

788A9E

9F7A9D

9F8D7A

7A9F7B

Contrast Matrix WCAG 2.1 Contrast

788A9E	7BBBFF	C9C9C9	FFC7F1	DFE8F2
—	1.8 Fail	2.1 Fail	2.5 Fail	2.9 Fail
1.8 Fail	—	1.2 Fail	1.4 Fail	1.6 Fail
2.1 Fail	1.2 Fail	—	1.2 Fail	1.3 Fail
2.5 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
2.9 Fail	1.6 Fail	1.3 Fail	1.2 Fail	—

White BG

3.5AA Large

2.0Fail

1.7Fail

1.4Fail

1.2Fail

Black BG

5.9AA

10.4AAA

12.7AAA

14.7AAA

17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

808099

9797EF

C9C9C9

E7E6E7

E3E3F0

Deuteranopia

7F7D98

938EEB

C9C9C9

EAEEE4

E2E2EF

Tritanopia

799595

7EE2DF

C9C9C9

FCDFDD

DFEEED

Achromatopsia

878787

B0B0B0

C9C9C9

DDDDDD

E6E6E6

Shades & Tints Shades & Tints

#788A9E

Dark

Light

#7BBBFF

Dark

Light

#C9C9C9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #788a9e;
  --color-2: #7bbbff;
  --color-3: #c9c9c9;
  --color-4: #ffc7f1;
  --color-5: #dfe8f2;
}

SCSS

$color-1: #788a9e;
$color-2: #7bbbff;
$color-3: #c9c9c9;
$color-4: #ffc7f1;
$color-5: #dfe8f2;

TAILWIND

colors: {
  'brand-1': '#788a9e',
  'brand-2': '#7bbbff',
  'brand-3': '#c9c9c9',
  'brand-4': '#ffc7f1',
  'brand-5': '#dfe8f2',
}

RGB Array

[120, 138, 158], [123, 187, 255], [201, 201, 201], [255, 199, 241], [223, 232, 242]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #788A9E, #7BBBFF, #C9C9C9, #FFC7F1, #DFE8F2 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: #788a9e; --color-2: #7bbbff; --color-3: #c9c9c9; --color-4: #ffc7f1; --color-5: #dfe8f2. 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 cool-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