← Back to Editor

#E9EFC6 · #AFC6B5 · #4E8299 · #BDD0C2 · #FFFFFF

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

WorkspaceReadingData Visualization

Color Details Color Details

#E9EFC6

Fresh Green · Bisque · Lemon Cream

HEX
#E9EFC6
RGB
rgb(233, 239, 198)
HSL
hsl(69, 56%, 86%)
HSB
hsb(69, 17%, 94%)
CMYK
cmyk(3%, 0%, 17%, 6%)
Oklch
oklch(93.7% 0.054 114.2)

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

#AFC6B5

Celadon · Silver · Apple Green

HEX
#AFC6B5
RGB
rgb(175, 198, 181)
HSL
hsl(136, 17%, 73%)
HSB
hsb(136, 12%, 78%)
CMYK
cmyk(12%, 0%, 9%, 22%)
Oklch
oklch(80.4% 0.034 153.5)

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

#4E8299

Slate Blue · SteelBlue · Mint Ice

HEX
#4E8299
RGB
rgb(78, 130, 153)
HSL
hsl(198, 32%, 45%)
HSB
hsb(198, 49%, 60%)
CMYK
cmyk(49%, 15%, 0%, 40%)
Oklch
oklch(57.9% 0.066 228.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#BDD0C2

Celadon · Silver · Apple Green

HEX
#BDD0C2
RGB
rgb(189, 208, 194)
HSL
hsl(136, 17%, 78%)
HSB
hsb(136, 9%, 82%)
CMYK
cmyk(9%, 0%, 7%, 18%)
Oklch
oklch(83.9% 0.028 153.8)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E9EFC6
CDC7EF

Analogous

EFE1C7
E9EFC6
D5EFC7

Triadic

E9EFC6
C7E9EF
EFC7E9

Split-Comp.

E9EFC6
C7D5EF
E1C7EF

Tetradic

E9EFC6
C7EFE1
CDC7EF
EFC7D5

Contrast Matrix WCAG 2.1 Contrast

E9EFC6
AFC6B5
4E8299
BDD0C2
FFFFFF
—
1.5
Fail
3.5
AA Large
1.4
Fail
1.2
Fail
1.5
Fail
—
2.3
Fail
1.1
Fail
1.8
Fail
3.5
AA Large
2.3
Fail
—
2.6
Fail
4.2
AA Large
1.4
Fail
1.1
Fail
2.6
Fail
—
1.6
Fail
1.2
Fail
1.8
Fail
4.2
AA Large
1.6
Fail
—
White BG
1.2Fail
1.8Fail
4.2AA Large
1.6Fail
1.0Fail
Black BG
17.6AAA
11.6AAA
5.0AA
13.0AAA
21.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECD0
B9B9B9
656593
C5C5C5
FFFFFF

Deuteranopia

EBEBD2
B8B6BA
625E92
C4C3C6
FFFFFF

Tritanopia

E9D8D9
B0BCBD
518F8E
BEC8C9
FFFFFF

Achromatopsia

E9E9E9
BDBDBD
757575
C9C9C9
FFFFFF

Shades & Tints Shades & Tints

#E9EFC6

Dark
Light

#AFC6B5

Dark
Light

#4E8299

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e9efc6;
  --color-2: #afc6b5;
  --color-3: #4e8299;
  --color-4: #bdd0c2;
  --color-5: #ffffff;
}

SCSS

$color-1: #e9efc6;
$color-2: #afc6b5;
$color-3: #4e8299;
$color-4: #bdd0c2;
$color-5: #ffffff;

TAILWIND

colors: {
  'brand-1': '#e9efc6',
  'brand-2': '#afc6b5',
  'brand-3': '#4e8299',
  'brand-4': '#bdd0c2',
  'brand-5': '#ffffff',
}

RGB Array

[233, 239, 198], [175, 198, 181], [78, 130, 153], [189, 208, 194], [255, 255, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E9EFC6, #AFC6B5, #4E8299, #BDD0C2, #FFFFFF is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #e9efc6; --color-2: #afc6b5; --color-3: #4e8299; --color-4: #bdd0c2; --color-5: #ffffff. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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