#6EA1B8 + #B4DAEA + #D1ECF8 + #E7F0F4 + #F59B1B · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#6EA1B8

Slate Blue · CadetBlue · Lake Green

HEX

#6EA1B8

RGB

rgb(110, 161, 184)

HSL

hsl(199, 34%, 58%)

HSB

hsb(199, 40%, 72%)

CMYK

cmyk(40%, 13%, 0%, 28%)

Oklch

oklch(68.1% 0.064 227.9)

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

#B4DAEA

Sky Blue · LightBlue · Glacier Blue

HEX

#B4DAEA

RGB

rgb(180, 218, 234)

HSL

hsl(198, 56%, 81%)

HSB

hsb(198, 23%, 92%)

CMYK

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

Oklch

oklch(86.6% 0.046 225.3)

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

#D1ECF8

Sky Blue · Lavender · Glacier Blue

HEX

#D1ECF8

RGB

rgb(209, 236, 248)

HSL

hsl(198, 74%, 90%)

HSB

hsb(198, 16%, 97%)

CMYK

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

Oklch

oklch(92.7% 0.033 226.3)

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

#E7F0F4

Sky Blue · Lavender · Glacier Blue

HEX

#E7F0F4

RGB

rgb(231, 240, 244)

HSL

hsl(198, 37%, 93%)

HSB

hsb(198, 5%, 96%)

CMYK

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

Oklch

oklch(95.0% 0.011 226.0)

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

#F59B1B

Ginger · GoldenRod · Warm Sun

HEX

#F59B1B

RGB

rgb(245, 155, 27)

HSL

hsl(35, 92%, 53%)

HSB

hsb(35, 89%, 96%)

CMYK

cmyk(0%, 37%, 89%, 4%)

Oklch

oklch(76.4% 0.162 67.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6EA1B8

B8876F

Analogous

6FB8AB

6EA1B8

6F7DB8

Triadic

6EA1B8

B86FA1

A1B86F

Split-Comp.

6EA1B8

B86F7D

B8AB6F

Tetradic

6EA1B8

AB6FB8

B8876F

7DB86F

Contrast Matrix WCAG 2.1 Contrast

6EA1B8	B4DAEA	D1ECF8	E7F0F4	F59B1B
—	1.9 Fail	2.3 Fail	2.4 Fail	1.3 Fail
1.9 Fail	—	1.2 Fail	1.3 Fail	1.5 Fail
2.3 Fail	1.2 Fail	—	1.1 Fail	1.8 Fail
2.4 Fail	1.3 Fail	1.1 Fail	—	1.9 Fail
1.3 Fail	1.5 Fail	1.8 Fail	1.9 Fail	—

White BG

2.8Fail

1.5Fail

1.2Fail

2.2Fail

Black BG

7.5AAA

14.2AAA

17.1AAA

18.2AAA

9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8485B2

C4C5E6

DDDDF5

EBEBF3

CECD3A

Deuteranopia

817DB1

C2BFE5

DBD9F4

EAEAF3

D3DA41

Tritanopia

71AEAD

B6E3E2

D2F3F2

E7F2F2

F15258

Achromatopsia

949494

D0D0D0

E5E5E5

EEEEEE

A7A7A7

Shades & Tints Shades & Tints

#6EA1B8

Dark

Light

#B4DAEA

Dark

Light

#D1ECF8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6ea1b8;
  --color-2: #b4daea;
  --color-3: #d1ecf8;
  --color-4: #e7f0f4;
  --color-5: #f59b1b;
}

SCSS

$color-1: #6ea1b8;
$color-2: #b4daea;
$color-3: #d1ecf8;
$color-4: #e7f0f4;
$color-5: #f59b1b;

TAILWIND

colors: {
  'brand-1': '#6ea1b8',
  'brand-2': '#b4daea',
  'brand-3': '#d1ecf8',
  'brand-4': '#e7f0f4',
  'brand-5': '#f59b1b',
}

RGB Array

[110, 161, 184], [180, 218, 234], [209, 236, 248], [231, 240, 244], [245, 155, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #6EA1B8, #B4DAEA, #D1ECF8, #E7F0F4, #F59B1B 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: #6ea1b8; --color-2: #b4daea; --color-3: #d1ecf8; --color-4: #e7f0f4; --color-5: #f59b1b. 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