#E3DD7F + #9C87D4 + #8499D8 + #C8CCD5 + #F1F1E9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E3DD7F

Fresh Green · Khaki · Sunflower

HEX

#E3DD7F

RGB

rgb(227, 221, 127)

HSL

hsl(56, 64%, 69%)

HSB

hsb(56, 44%, 89%)

CMYK

cmyk(0%, 3%, 44%, 11%)

Oklch

oklch(88.2% 0.116 105.3)

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

#9C87D4

Wisteria · MediumSlateBlue · Cobalt Blue

HEX

#9C87D4

RGB

rgb(156, 135, 212)

HSL

hsl(256, 47%, 68%)

HSB

hsb(256, 36%, 83%)

CMYK

cmyk(26%, 36%, 0%, 17%)

Oklch

oklch(67.3% 0.113 295.7)

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

#8499D8

Azure · CornflowerBlue · Cobalt Blue

HEX

#8499D8

RGB

rgb(132, 153, 216)

HSL

hsl(225, 52%, 68%)

HSB

hsb(225, 39%, 85%)

CMYK

cmyk(39%, 29%, 0%, 15%)

Oklch

oklch(69.1% 0.096 269.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#C8CCD5

Azure · LightGray · Sky Blue

HEX

#C8CCD5

RGB

rgb(200, 204, 213)

HSL

hsl(222, 13%, 81%)

HSB

hsb(222, 6%, 84%)

CMYK

cmyk(6%, 4%, 0%, 16%)

Oklch

oklch(84.5% 0.013 266.7)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#F1F1E9

Fresh Green · Linen · Lemon Cream

HEX

#F1F1E9

RGB

rgb(241, 241, 233)

HSL

hsl(60, 22%, 93%)

HSB

hsb(60, 3%, 95%)

CMYK

cmyk(0%, 0%, 3%, 5%)

Oklch

oklch(95.6% 0.011 106.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3DD7F

7D84E3

Analogous

E3A97D

E3DD7F

B7E37D

Triadic

E3DD7F

7DE3DC

DC7DE3

Split-Comp.

E3DD7F

7DB7E3

A97DE3

Tetradic

E3DD7F

7DE3A9

7D84E3

E37DB7

Contrast Matrix WCAG 2.1 Contrast

E3DD7F	9C87D4	8499D8	C8CCD5	F1F1E9
—	2.2 Fail	2.0 Fail	1.1 Fail	1.2 Fail
2.2 Fail	—	1.1 Fail	1.9 Fail	2.7 Fail
2.0 Fail	1.1 Fail	—	1.7 Fail	2.5 Fail
1.1 Fail	1.9 Fail	1.7 Fail	—	1.4 Fail
1.2 Fail	2.7 Fail	2.5 Fail	1.4 Fail	—

White BG

1.4Fail

3.1AA Large

2.8Fail

1.6Fail

1.1Fail

Black BG

14.9AAA

6.8AA

7.5AAA

13.1AAA

18.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E096

9393C1

8D8DC9

CACAD3

F1F1EB

Deuteranopia

E1E19B

9496BD

8C8AC5

CAC9D2

F1F1EB

Tritanopia

E3A8AC

9BB3AF

85BDBA

C8D1D1

F1ECED

Achromatopsia

D4D4D4

969696

9A9A9A

CCCCCC

F0F0F0

Shades & Tints Shades & Tints

#E3DD7F

Dark

Light

#9C87D4

Dark

Light

#8499D8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3dd7f;
  --color-2: #9c87d4;
  --color-3: #8499d8;
  --color-4: #c8ccd5;
  --color-5: #f1f1e9;
}

SCSS

$color-1: #e3dd7f;
$color-2: #9c87d4;
$color-3: #8499d8;
$color-4: #c8ccd5;
$color-5: #f1f1e9;

TAILWIND

colors: {
  'brand-1': '#e3dd7f',
  'brand-2': '#9c87d4',
  'brand-3': '#8499d8',
  'brand-4': '#c8ccd5',
  'brand-5': '#f1f1e9',
}

RGB Array

[227, 221, 127], [156, 135, 212], [132, 153, 216], [200, 204, 213], [241, 241, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3DD7F, #9C87D4, #8499D8, #C8CCD5, #F1F1E9 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: #e3dd7f; --color-2: #9c87d4; --color-3: #8499d8; --color-4: #c8ccd5; --color-5: #f1f1e9. 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