#E4D1E8 + #C1DBD5 + #ABDB91 + #BACA59 + #D6AD36 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E4D1E8

Lilac · LightGray · Lavender

HEX

#E4D1E8

RGB

rgb(228, 209, 232)

HSL

hsl(290, 33%, 86%)

HSB

hsb(290, 10%, 91%)

CMYK

cmyk(2%, 10%, 0%, 9%)

Oklch

oklch(88.3% 0.037 320.4)

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

#C1DBD5

Jade · LightGray · Glacier Blue

HEX

#C1DBD5

RGB

rgb(193, 219, 213)

HSL

hsl(166, 27%, 81%)

HSB

hsb(166, 12%, 86%)

CMYK

cmyk(12%, 0%, 3%, 14%)

Oklch

oklch(87.1% 0.029 180.2)

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

#ABDB91

Emerald · LightGreen · Apple Green

HEX

#ABDB91

RGB

rgb(171, 219, 145)

HSL

hsl(99, 51%, 71%)

HSB

hsb(99, 34%, 86%)

CMYK

cmyk(22%, 0%, 34%, 14%)

Oklch

oklch(84.0% 0.111 135.0)

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

#BACA59

Autumn Sage · Tan · Sunflower

HEX

#BACA59

RGB

rgb(186, 202, 89)

HSL

hsl(68, 52%, 57%)

HSB

hsb(68, 56%, 79%)

CMYK

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

Oklch

oklch(80.4% 0.139 116.4)

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

#D6AD36

Ginger · GoldenRod · Sunflower

HEX

#D6AD36

RGB

rgb(214, 173, 54)

HSL

hsl(45, 66%, 53%)

HSB

hsb(45, 75%, 84%)

CMYK

cmyk(0%, 19%, 75%, 16%)

Oklch

oklch(76.4% 0.139 88.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4D1E8

D3E7D0

Analogous

D7D0E7

E4D1E8

E7D0DF

Triadic

E4D1E8

E7E3D0

D0E7E3

Split-Comp.

E4D1E8

DFE7D0

D0E7D7

Tetradic

E4D1E8

E7D7D0

D3E7D0

D0DFE7

Contrast Matrix WCAG 2.1 Contrast

E4D1E8	C1DBD5	ABDB91	BACA59	D6AD36
—	1.0 Fail	1.1 Fail	1.2 Fail	1.5 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.5 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.5 Fail	1.5 Fail	1.3 Fail	1.2 Fail	—

White BG

1.4Fail

1.5Fail

1.6Fail

1.8Fail

2.1Fail

Black BG

14.6AAA

14.4AAA

13.3AAA

11.7AAA

9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCE2

CCCCD6

C0C0A3

C1C174

C4C453

Deuteranopia

DDDEE1

CBC9D7

BDB9A7

C0BF7B

C7CA5A

Tritanopia

E3DEDD

C2D8D8

ADB1B4

BB8A8F

D46A6F

Achromatopsia

D9D9D9

D3D3D3

C4C4C4

B8B8B8

ACACAC

Shades & Tints Shades & Tints

#E4D1E8

Dark

Light

#C1DBD5

Dark

Light

#ABDB91

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4d1e8;
  --color-2: #c1dbd5;
  --color-3: #abdb91;
  --color-4: #baca59;
  --color-5: #d6ad36;
}

SCSS

$color-1: #e4d1e8;
$color-2: #c1dbd5;
$color-3: #abdb91;
$color-4: #baca59;
$color-5: #d6ad36;

TAILWIND

colors: {
  'brand-1': '#e4d1e8',
  'brand-2': '#c1dbd5',
  'brand-3': '#abdb91',
  'brand-4': '#baca59',
  'brand-5': '#d6ad36',
}

RGB Array

[228, 209, 232], [193, 219, 213], [171, 219, 145], [186, 202, 89], [214, 173, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4D1E8, #C1DBD5, #ABDB91, #BACA59, #D6AD36 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: #e4d1e8; --color-2: #c1dbd5; --color-3: #abdb91; --color-4: #baca59; --color-5: #d6ad36. 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