← Back to Editor

#E4E8CE · #D1E0D5 · #C3D2DD · #C8BDD8 · #D1A7C1

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E4E8CE

Fresh Green · Beige · Lemon Cream

HEX
#E4E8CE
RGB
rgb(228, 232, 206)
HSL
hsl(69, 36%, 86%)
HSB
hsb(69, 11%, 91%)
CMYK
cmyk(2%, 0%, 11%, 9%)
Oklch
oklch(92.1% 0.035 114.2)

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

#D1E0D5

Celadon · LightGray · Mint Green

HEX
#D1E0D5
RGB
rgb(209, 224, 213)
HSL
hsl(136, 19%, 85%)
HSB
hsb(136, 7%, 88%)
CMYK
cmyk(7%, 0%, 5%, 12%)
Oklch
oklch(89.2% 0.022 154.1)

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

#C3D2DD

Sky Blue · LightGray · Sky Blue

HEX
#C3D2DD
RGB
rgb(195, 210, 221)
HSL
hsl(205, 28%, 82%)
HSB
hsb(205, 12%, 87%)
CMYK
cmyk(12%, 5%, 0%, 13%)
Oklch
oklch(85.6% 0.022 239.5)

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

#C8BDD8

Wisteria · LightGray · Lilac Purple

HEX
#C8BDD8
RGB
rgb(200, 189, 216)
HSL
hsl(264, 26%, 79%)
HSB
hsb(264, 12%, 85%)
CMYK
cmyk(7%, 12%, 0%, 15%)
Oklch
oklch(81.6% 0.039 304.0)

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

#D1A7C1

Mauve · Silver · Rose Pink

HEX
#D1A7C1
RGB
rgb(209, 167, 193)
HSL
hsl(323, 31%, 74%)
HSB
hsb(323, 20%, 82%)
CMYK
cmyk(0%, 20%, 8%, 18%)
Oklch
oklch(77.4% 0.060 341.0)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4E8CE
D2CEE8

Analogous

E8DFCE
E4E8CE
D7E8CE

Triadic

E4E8CE
CEE4E8
E8CEE4

Split-Comp.

E4E8CE
CED7E8
DFCEE8

Tetradic

E4E8CE
CEE8DF
D2CEE8
E8CED7

Contrast Matrix WCAG 2.1 Contrast

E4E8CE
D1E0D5
C3D2DD
C8BDD8
D1A7C1
—
1.1
Fail
1.2
Fail
1.4
Fail
1.7
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.5
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.7
Fail
1.5
Fail
1.4
Fail
1.2
Fail
—
White BG
1.3Fail
1.4Fail
1.5Fail
1.8Fail
2.1Fail
Black BG
16.7AAA
15.3AAA
13.6AAA
11.7AAA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6D4
D7D8D8
C9CADA
C3C3D1
BFBEBB

Deuteranopia

E6E5D6
D7D6D8
C9C8DA
C4C5D0
C1C4B9

Tritanopia

E4D9DA
D2DADA
C4D8D8
C7CCCB
CFB6B5

Achromatopsia

E4E4E4
DADADA
CFCFCF
C3C3C3
B7B7B7

Shades & Tints Shades & Tints

#E4E8CE

Dark
Light

#D1E0D5

Dark
Light

#C3D2DD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4e8ce;
  --color-2: #d1e0d5;
  --color-3: #c3d2dd;
  --color-4: #c8bdd8;
  --color-5: #d1a7c1;
}

SCSS

$color-1: #e4e8ce;
$color-2: #d1e0d5;
$color-3: #c3d2dd;
$color-4: #c8bdd8;
$color-5: #d1a7c1;

TAILWIND

colors: {
  'brand-1': '#e4e8ce',
  'brand-2': '#d1e0d5',
  'brand-3': '#c3d2dd',
  'brand-4': '#c8bdd8',
  'brand-5': '#d1a7c1',
}

RGB Array

[228, 232, 206], [209, 224, 213], [195, 210, 221], [200, 189, 216], [209, 167, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4E8CE, #D1E0D5, #C3D2DD, #C8BDD8, #D1A7C1 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e4e8ce; --color-2: #d1e0d5; --color-3: #c3d2dd; --color-4: #c8bdd8; --color-5: #d1a7c1. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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