#ECF4C3 + #C7EFBB + #A3E6BA + #7ABCAE + #8D6B7B · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#ECF4C3

Willow Green · Bisque · Mint Green

HEX

#ECF4C3

RGB

rgb(236, 244, 195)

HSL

hsl(70, 69%, 86%)

HSB

hsb(70, 20%, 96%)

CMYK

cmyk(3%, 0%, 20%, 4%)

Oklch

oklch(94.9% 0.064 115.2)

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

#C7EFBB

Emerald · LightGray · Mint Green

HEX

#C7EFBB

RGB

rgb(199, 239, 187)

HSL

hsl(106, 62%, 84%)

HSB

hsb(106, 22%, 94%)

CMYK

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

Oklch

oklch(91.0% 0.081 138.5)

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

#A3E6BA

Emerald · LightGreen · Apple Green

HEX

#A3E6BA

RGB

rgb(163, 230, 186)

HSL

hsl(141, 57%, 77%)

HSB

hsb(141, 29%, 90%)

CMYK

cmyk(29%, 0%, 19%, 10%)

Oklch

oklch(86.8% 0.091 155.3)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

#7ABCAE

Jade · MediumAquaMarine · Lake Green

HEX

#7ABCAE

RGB

rgb(122, 188, 174)

HSL

hsl(167, 33%, 61%)

HSB

hsb(167, 35%, 74%)

CMYK

cmyk(35%, 0%, 7%, 26%)

Oklch

oklch(74.7% 0.071 179.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#8D6B7B

Dark Violet · Gray · Camellia

HEX

#8D6B7B

RGB

rgb(141, 107, 123)

HSL

hsl(332, 14%, 49%)

HSB

hsb(332, 24%, 55%)

CMYK

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

Oklch

oklch(56.7% 0.049 348.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF4C3

CBC3F4

Analogous

F4E4C3

ECF4C3

D3F4C3

Triadic

ECF4C3

C3ECF4

F4C3EC

Split-Comp.

ECF4C3

C3D3F4

E4C3F4

Tetradic

ECF4C3

C3F4E4

CBC3F4

F4C3D3

Contrast Matrix WCAG 2.1 Contrast

ECF4C3	C7EFBB	A3E6BA	7ABCAE	8D6B7B
—	1.1 Fail	1.3 Fail	1.9 Fail	4.0 AA Large
1.1 Fail	—	1.1 Fail	1.7 Fail	3.6 AA Large
1.3 Fail	1.1 Fail	—	1.5 Fail	3.2 AA Large
1.9 Fail	1.7 Fail	1.5 Fail	—	2.1 Fail
4.0 AA Large	3.6 AA Large	3.2 AA Large	2.1 Fail	—

White BG

1.1Fail

1.3Fail

1.4Fail

2.2Fail

4.6AA

Black BG

18.3AAA

16.5AAA

14.6AAA

9.6AAA

4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFF0CF

D8D9C8

C0C1C5

9797B1

7E7E77

Deuteranopia

EFEED2

D6D3CB

BCB7C7

938EB2

808376

Tritanopia

ECD8DA

C9D2D4

A6CDCF

7DB4B5

8B7473

Achromatopsia

ECECEC

DDDDDD

CDCDCD

A7A7A7

777777

Shades & Tints Shades & Tints

#ECF4C3

Dark

Light

#C7EFBB

Dark

Light

#A3E6BA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf4c3;
  --color-2: #c7efbb;
  --color-3: #a3e6ba;
  --color-4: #7abcae;
  --color-5: #8d6b7b;
}

SCSS

$color-1: #ecf4c3;
$color-2: #c7efbb;
$color-3: #a3e6ba;
$color-4: #7abcae;
$color-5: #8d6b7b;

TAILWIND

colors: {
  'brand-1': '#ecf4c3',
  'brand-2': '#c7efbb',
  'brand-3': '#a3e6ba',
  'brand-4': '#7abcae',
  'brand-5': '#8d6b7b',
}

RGB Array

[236, 244, 195], [199, 239, 187], [163, 230, 186], [122, 188, 174], [141, 107, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #ECF4C3, #C7EFBB, #A3E6BA, #7ABCAE, #8D6B7B 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: #ecf4c3; --color-2: #c7efbb; --color-3: #a3e6ba; --color-4: #7abcae; --color-5: #8d6b7b. 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 pastel-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