#ECDFF1 + #DCD7D7 + #A4A0A7 + #F2F416 + #F7EEC0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECDFF1

Lilac · Lavender · Lavender

HEX

#ECDFF1

RGB

rgb(236, 223, 241)

HSL

hsl(283, 39%, 91%)

HSB

hsb(283, 7%, 95%)

CMYK

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

Oklch

oklch(91.9% 0.028 316.7)

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

#DCD7D7

Silver Gray · LightGray · Pearl Gray

HEX

#DCD7D7

RGB

rgb(220, 215, 215)

HSL

hsl(0, 7%, 85%)

HSB

hsb(0, 2%, 86%)

CMYK

cmyk(0%, 2%, 2%, 14%)

Oklch

oklch(88.3% 0.005 17.3)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#A4A0A7

Ash · DarkGray · Silver Sand

HEX

#A4A0A7

RGB

rgb(164, 160, 167)

HSL

hsl(274, 4%, 64%)

HSB

hsb(274, 4%, 65%)

CMYK

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

Oklch

oklch(71.1% 0.011 311.1)

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

#F2F416

Autumn Sage · Yellow · Sunflower

HEX

#F2F416

RGB

rgb(242, 244, 22)

HSL

hsl(61, 91%, 52%)

HSB

hsb(61, 91%, 96%)

CMYK

cmyk(1%, 0%, 91%, 4%)

Oklch

oklch(93.5% 0.202 110.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#F7EEC0

Fresh Green · Bisque · Lemon Cream

HEX

#F7EEC0

RGB

rgb(247, 238, 192)

HSL

hsl(50, 77%, 86%)

HSB

hsb(50, 22%, 97%)

CMYK

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

Oklch

oklch(94.5% 0.060 98.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECDFF1

E4F1DF

Analogous

E3DFF1

ECDFF1

F1DFED

Triadic

ECDFF1

F1ECDF

DFF1EC

Split-Comp.

ECDFF1

EDF1DF

DFF1E3

Tetradic

ECDFF1

F1E3DF

E4F1DF

DFEDF1

Contrast Matrix WCAG 2.1 Contrast

ECDFF1	DCD7D7	A4A0A7	F2F416	F7EEC0
—	1.1 Fail	2.0 Fail	1.1 Fail	1.1 Fail
1.1 Fail	—	1.8 Fail	1.2 Fail	1.2 Fail
2.0 Fail	1.8 Fail	—	2.2 Fail	2.2 Fail
1.1 Fail	1.2 Fail	2.2 Fail	—	1.0 Fail
1.1 Fail	1.2 Fail	2.2 Fail	1.0 Fail	—

White BG

1.3Fail

1.4Fail

2.6Fail

1.2Fail

Black BG

16.4AAA

14.7AAA

8.2AAA

17.7AAA

17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6ED

DADAD7

A2A2A5

F3F34C

F3F3CB

Deuteranopia

E7E8EC

DADBD7

A3A3A5

F3F359

F4F4CE

Tritanopia

EBE9E8

DCD7D7

A4A4A4

F2767F

F7D4D6

Achromatopsia

E5E5E5

D8D8D8

A2A2A2

DADADA

EBEBEB

Shades & Tints Shades & Tints

#ECDFF1

Dark

Light

#DCD7D7

Dark

Light

#A4A0A7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecdff1;
  --color-2: #dcd7d7;
  --color-3: #a4a0a7;
  --color-4: #f2f416;
  --color-5: #f7eec0;
}

SCSS

$color-1: #ecdff1;
$color-2: #dcd7d7;
$color-3: #a4a0a7;
$color-4: #f2f416;
$color-5: #f7eec0;

TAILWIND

colors: {
  'brand-1': '#ecdff1',
  'brand-2': '#dcd7d7',
  'brand-3': '#a4a0a7',
  'brand-4': '#f2f416',
  'brand-5': '#f7eec0',
}

RGB Array

[236, 223, 241], [220, 215, 215], [164, 160, 167], [242, 244, 22], [247, 238, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECDFF1, #DCD7D7, #A4A0A7, #F2F416, #F7EEC0 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: #ecdff1; --color-2: #dcd7d7; --color-3: #a4a0a7; --color-4: #f2f416; --color-5: #f7eec0. 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