#ECA7C6 + #F0C7C8 + #E6DFCF + #D8E8DD + #C7EDF0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECA7C6

Rouge · LightPink · Cherry Blossom

HEX

#ECA7C6

RGB

rgb(236, 167, 198)

HSL

hsl(333, 64%, 79%)

HSB

hsb(333, 29%, 93%)

CMYK

cmyk(0%, 29%, 16%, 7%)

Oklch

oklch(80.3% 0.090 350.7)

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

#F0C7C8

Peach Pink · Pink · Cherry Blossom

HEX

#F0C7C8

RGB

rgb(240, 199, 200)

HSL

hsl(359, 58%, 86%)

HSB

hsb(359, 17%, 94%)

CMYK

cmyk(0%, 17%, 17%, 6%)

Oklch

oklch(86.5% 0.047 16.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#E6DFCF

Goose Yellow · LightGray · Lemon Cream

HEX

#E6DFCF

RGB

rgb(230, 223, 207)

HSL

hsl(42, 32%, 86%)

HSB

hsb(42, 10%, 90%)

CMYK

cmyk(0%, 3%, 10%, 10%)

Oklch

oklch(90.5% 0.023 87.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D8E8DD

Celadon · LightGray · Mint Green

HEX

#D8E8DD

RGB

rgb(216, 232, 221)

HSL

hsl(139, 26%, 88%)

HSB

hsb(139, 7%, 91%)

CMYK

cmyk(7%, 0%, 5%, 9%)

Oklch

oklch(91.6% 0.023 155.9)

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

#C7EDF0

Sky Blue · Lavender · Glacier Blue

HEX

#C7EDF0

RGB

rgb(199, 237, 240)

HSL

hsl(184, 58%, 86%)

HSB

hsb(184, 17%, 94%)

CMYK

cmyk(17%, 1%, 0%, 6%)

Oklch

oklch(92.0% 0.040 202.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECA7C6

A7ECCD

Analogous

ECA7E8

ECA7C6

ECABA7

Triadic

ECA7C6

C6ECA7

A7C6EC

Split-Comp.

ECA7C6

A7ECAB

A7E8EC

Tetradic

ECA7C6

E8ECA7

A7ECCD

ABA7EC

Contrast Matrix WCAG 2.1 Contrast

ECA7C6	F0C7C8	E6DFCF	D8E8DD	C7EDF0
—	1.3 Fail	1.5 Fail	1.5 Fail	1.5 Fail
1.3 Fail	—	1.2 Fail	1.2 Fail	1.2 Fail
1.5 Fail	1.2 Fail	—	1.0 Fail	1.1 Fail
1.5 Fail	1.2 Fail	1.0 Fail	—	1.0 Fail
1.5 Fail	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

1.9Fail

1.5Fail

1.3Fail

1.2Fail

Black BG

10.9AAA

13.7AAA

15.8AAA

16.5AAA

16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECEBE

DEDEC8

E3E3D3

DFDFE0

D7D8EF

Deuteranopia

D2D7BD

E1E4C8

E3E4D4

DEDDE0

D5D2EF

Tritanopia

E9B9B7

EEC8C8

E6D6D7

D9E2E2

C9EFEF

Achromatopsia

BFBFBF

D3D3D3

DFDFDF

E2E2E2

Shades & Tints Shades & Tints

#ECA7C6

Dark

Light

#F0C7C8

Dark

Light

#E6DFCF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eca7c6;
  --color-2: #f0c7c8;
  --color-3: #e6dfcf;
  --color-4: #d8e8dd;
  --color-5: #c7edf0;
}

SCSS

$color-1: #eca7c6;
$color-2: #f0c7c8;
$color-3: #e6dfcf;
$color-4: #d8e8dd;
$color-5: #c7edf0;

TAILWIND

colors: {
  'brand-1': '#eca7c6',
  'brand-2': '#f0c7c8',
  'brand-3': '#e6dfcf',
  'brand-4': '#d8e8dd',
  'brand-5': '#c7edf0',
}

RGB Array

[236, 167, 198], [240, 199, 200], [230, 223, 207], [216, 232, 221], [199, 237, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECA7C6, #F0C7C8, #E6DFCF, #D8E8DD, #C7EDF0 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: #eca7c6; --color-2: #f0c7c8; --color-3: #e6dfcf; --color-4: #d8e8dd; --color-5: #c7edf0. 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