#E4DAEF + #E4D264 + #B6B98B + #B4ABB7 + #978892 · 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

#E4DAEF

Wisteria · Lavender · Lavender

HEX

#E4DAEF

RGB

rgb(228, 218, 239)

HSL

hsl(269, 40%, 90%)

HSB

hsb(269, 9%, 94%)

CMYK

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

Oklch

oklch(90.3% 0.030 307.1)

Traditional「Wisteria」· Paint「Lavender」· Creative Lavender Dream

#E4D264

Fresh Green · BurlyWood · Sunflower

HEX

#E4D264

RGB

rgb(228, 210, 100)

HSL

hsl(52, 70%, 64%)

HSB

hsb(52, 56%, 89%)

CMYK

cmyk(0%, 8%, 56%, 11%)

Oklch

oklch(85.7% 0.132 100.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#B6B98B

Fresh Green · Tan · Sunflower

HEX

#B6B98B

RGB

rgb(182, 185, 139)

HSL

hsl(64, 25%, 64%)

HSB

hsb(64, 25%, 73%)

CMYK

cmyk(2%, 0%, 25%, 27%)

Oklch

oklch(77.2% 0.062 110.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#B4ABB7

Lilac · DarkGray · Silver Sand

HEX

#B4ABB7

RGB

rgb(180, 171, 183)

HSL

hsl(285, 8%, 69%)

HSB

hsb(285, 7%, 72%)

CMYK

cmyk(2%, 7%, 0%, 28%)

Oklch

oklch(75.2% 0.020 317.7)

Traditional「Lilac」· Paint「Silver Sand」· Creative Urban Concrete

#978892

Ash · Gray · Silver Sand

HEX

#978892

RGB

rgb(151, 136, 146)

HSL

hsl(320, 7%, 56%)

HSB

hsb(320, 10%, 59%)

CMYK

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

Oklch

oklch(64.3% 0.023 338.0)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4DAEF

E6F0DB

Analogous

DBDCF0

E4DAEF

EFDBF0

Triadic

E4DAEF

F0E5DB

DBF0E5

Split-Comp.

E4DAEF

F0EFDB

DCF0DB

Tetradic

E4DAEF

F0DBDC

E6F0DB

DBF0EF

Contrast Matrix WCAG 2.1 Contrast

E4DAEF	E4D264	B6B98B	B4ABB7	978892
—	1.1 Fail	1.5 Fail	1.6 Fail	2.5 Fail
1.1 Fail	—	1.3 Fail	1.4 Fail	2.2 Fail
1.5 Fail	1.3 Fail	—	1.1 Fail	1.6 Fail
1.6 Fail	1.4 Fail	1.1 Fail	—	1.5 Fail
2.5 Fail	2.2 Fail	1.6 Fail	1.5 Fail	—

White BG

1.3Fail

1.5Fail

2.0Fail

2.2Fail

3.4AA Large

Black BG

15.6AAA

13.7AAA

10.3AAA

9.4AAA

6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0EA

DCDC7F

B7B796

B0B0B4

919090

Deuteranopia

E0E1E9

DDDF85

B7B799

B1B1B3

91938F

Tritanopia

E4E6E5

E39498

B69FA1

B4B2B1

968E8D

Achromatopsia

DFDFDF

CBCBCB

B3B3B3

AFAFAF

8E8E8E

Shades & Tints Shades & Tints

#E4DAEF

Dark

Light

#E4D264

Dark

Light

#B6B98B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4daef;
  --color-2: #e4d264;
  --color-3: #b6b98b;
  --color-4: #b4abb7;
  --color-5: #978892;
}

SCSS

$color-1: #e4daef;
$color-2: #e4d264;
$color-3: #b6b98b;
$color-4: #b4abb7;
$color-5: #978892;

TAILWIND

colors: {
  'brand-1': '#e4daef',
  'brand-2': '#e4d264',
  'brand-3': '#b6b98b',
  'brand-4': '#b4abb7',
  'brand-5': '#978892',
}

RGB Array

[228, 218, 239], [228, 210, 100], [182, 185, 139], [180, 171, 183], [151, 136, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #E4DAEF, #E4D264, #B6B98B, #B4ABB7, #978892 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: #e4daef; --color-2: #e4d264; --color-3: #b6b98b; --color-4: #b4abb7; --color-5: #978892. 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