#8EA5C5 + #B5C5D2 + #EADBE0 + #FFE7E3 + #F7FFED - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8EA5C5

Azure · DarkGray · Cobalt Blue

HEX

#8EA5C5

RGB

rgb(142, 165, 197)

HSL

hsl(215, 32%, 66%)

HSB

hsb(215, 28%, 77%)

CMYK

cmyk(28%, 16%, 0%, 23%)

Oklch

oklch(71.5% 0.054 256.7)

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

#B5C5D2

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#B5C5D2

RGB

rgb(181, 197, 210)

HSL

hsl(207, 24%, 77%)

HSB

hsb(207, 14%, 82%)

CMYK

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

Oklch

oklch(81.5% 0.025 242.4)

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

#EADBE0

Rouge · Linen · Cherry Blossom

HEX

#EADBE0

RGB

rgb(234, 219, 224)

HSL

hsl(340, 26%, 89%)

HSB

hsb(340, 6%, 92%)

CMYK

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

Oklch

oklch(90.5% 0.018 355.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#FFE7E3

Peach Pink · Linen · Cherry Blossom

HEX

#FFE7E3

RGB

rgb(255, 231, 227)

HSL

hsl(9, 100%, 95%)

HSB

hsb(9, 11%, 100%)

CMYK

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

Oklch

oklch(94.6% 0.027 28.9)

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

#F7FFED

Willow Green · SeaShell · Mint Green

HEX

#F7FFED

RGB

rgb(247, 255, 237)

HSL

hsl(87, 100%, 96%)

HSB

hsb(87, 7%, 100%)

CMYK

cmyk(3%, 0%, 7%, 0%)

Oklch

oklch(98.9% 0.025 126.5)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8EA5C5

C4AD8D

Analogous

8DBFC4

8EA5C5

918DC4

Triadic

8EA5C5

C48DA4

A4C48D

Split-Comp.

8EA5C5

C4918D

BFC48D

Tetradic

8EA5C5

C48DBF

C4AD8D

8DC491

Contrast Matrix WCAG 2.1 Contrast

8EA5C5	B5C5D2	EADBE0	FFE7E3	F7FFED
—	1.4 Fail	1.9 Fail	2.1 Fail	2.5 Fail
1.4 Fail	—	1.3 Fail	1.5 Fail	1.7 Fail
1.9 Fail	1.3 Fail	—	1.1 Fail	1.3 Fail
2.1 Fail	1.5 Fail	1.1 Fail	—	1.2 Fail
2.5 Fail	1.7 Fail	1.3 Fail	1.2 Fail	—

White BG

2.5Fail

1.8Fail

1.3Fail

1.2Fail

1.0Fail

Black BG

8.3AAA

11.9AAA

15.7AAA

17.8AAA

20.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9898BD

BCBCCF

E4E3DF

F5F4E4

FAFBF1

Deuteranopia

9795BB

BBBACE

E4E6DF

F6F8E4

FAF9F2

Tritanopia

8FB7B6

B6CCCC

E9DEDE

FEE5E5

F7F5F6

Achromatopsia

A2A2A2

C2C2C2

E0E0E0

EEEEEE

FBFBFB

Shades & Tints Shades & Tints

#8EA5C5

Dark

Light

#B5C5D2

Dark

Light

#EADBE0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ea5c5;
  --color-2: #b5c5d2;
  --color-3: #eadbe0;
  --color-4: #ffe7e3;
  --color-5: #f7ffed;
}

SCSS

$color-1: #8ea5c5;
$color-2: #b5c5d2;
$color-3: #eadbe0;
$color-4: #ffe7e3;
$color-5: #f7ffed;

TAILWIND

colors: {
  'brand-1': '#8ea5c5',
  'brand-2': '#b5c5d2',
  'brand-3': '#eadbe0',
  'brand-4': '#ffe7e3',
  'brand-5': '#f7ffed',
}

RGB Array

[142, 165, 197], [181, 197, 210], [234, 219, 224], [255, 231, 227], [247, 255, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8EA5C5, #B5C5D2, #EADBE0, #FFE7E3, #F7FFED 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: #8ea5c5; --color-2: #b5c5d2; --color-3: #eadbe0; --color-4: #ffe7e3; --color-5: #f7ffed. 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