← Back to Editor

#E3E9DF · #465A6C · #4F8FAD · #EFF0E3 · #FCF9F9

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

#E3E9DF

Celadon · Beige · Mint Green

HEX
#E3E9DF
RGB
rgb(227, 233, 223)
HSL
hsl(96, 19%, 89%)
HSB
hsb(96, 4%, 91%)
CMYK
cmyk(3%, 0%, 4%, 9%)
Oklch
oklch(92.7% 0.015 132.5)

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

#465A6C

Slate Blue · DimGray · Prussian Blue

HEX
#465A6C
RGB
rgb(70, 90, 108)
HSL
hsl(208, 21%, 35%)
HSB
hsb(208, 35%, 42%)
CMYK
cmyk(35%, 17%, 0%, 58%)
Oklch
oklch(45.8% 0.038 245.9)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#4F8FAD

Slate Blue · SteelBlue · Mint Ice

HEX
#4F8FAD
RGB
rgb(79, 143, 173)
HSL
hsl(199, 37%, 49%)
HSB
hsb(199, 54%, 68%)
CMYK
cmyk(54%, 17%, 0%, 32%)
Oklch
oklch(61.9% 0.080 230.2)

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

#EFF0E3

Fresh Green · Beige · Lemon Cream

HEX
#EFF0E3
RGB
rgb(239, 240, 227)
HSL
hsl(65, 30%, 92%)
HSB
hsb(65, 5%, 94%)
CMYK
cmyk(0%, 0%, 5%, 6%)
Oklch
oklch(95.1% 0.017 110.3)

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

#FCF9F9

Peach Pink · Snow · Cherry Blossom

HEX
#FCF9F9
RGB
rgb(252, 249, 249)
HSL
hsl(0, 33%, 98%)
HSB
hsb(0, 1%, 99%)
CMYK
cmyk(0%, 1%, 1%, 1%)
Oklch
oklch(98.4% 0.003 17.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3E9DF
E4DEE8

Analogous

E7E8DE
E3E9DF
DEE8DF

Triadic

E3E9DF
DEE2E8
E8DEE2

Split-Comp.

E3E9DF
DFDEE8
E8DEE7

Tetradic

E3E9DF
DEE7E8
E4DEE8
E8DFDE

Contrast Matrix WCAG 2.1 Contrast

E3E9DF
465A6C
4F8FAD
EFF0E3
FCF9F9
—
5.8
AA
2.9
Fail
1.1
Fail
1.2
Fail
5.8
AA
—
2.0
Fail
6.2
AA
6.8
AA
2.9
Fail
2.0
Fail
—
3.1
AA Large
3.4
AA Large
1.1
Fail
6.2
AA
3.1
AA Large
—
1.1
Fail
1.2
Fail
6.8
AA
3.4
AA Large
1.1
Fail
—
White BG
1.2Fail
7.1AAA
3.6AA Large
1.2Fail
1.0Fail
Black BG
17.0AAA
2.9Fail
5.9AA
18.2AAA
20.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6E1
4F4F68
6B6BA6
EFEFE6
FBFBF9

Deuteranopia

E5E5E2
4E4C67
6762A4
EFEFE7
FBFBF9

Tritanopia

E3E3E4
476463
52A09F
EFE9E9
FCF9F9

Achromatopsia

E6E6E6
565656
7F7F7F
EEEEEE
FAFAFA

Shades & Tints Shades & Tints

#E3E9DF

Dark
Light

#465A6C

Dark
Light

#4F8FAD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3e9df;
  --color-2: #465a6c;
  --color-3: #4f8fad;
  --color-4: #eff0e3;
  --color-5: #fcf9f9;
}

SCSS

$color-1: #e3e9df;
$color-2: #465a6c;
$color-3: #4f8fad;
$color-4: #eff0e3;
$color-5: #fcf9f9;

TAILWIND

colors: {
  'brand-1': '#e3e9df',
  'brand-2': '#465a6c',
  'brand-3': '#4f8fad',
  'brand-4': '#eff0e3',
  'brand-5': '#fcf9f9',
}

RGB Array

[227, 233, 223], [70, 90, 108], [79, 143, 173], [239, 240, 227], [252, 249, 249]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3E9DF, #465A6C, #4F8FAD, #EFF0E3, #FCF9F9 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: #e3e9df; --color-2: #465a6c; --color-3: #4f8fad; --color-4: #eff0e3; --color-5: #fcf9f9. 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