← Back to Editor

#F5F5F5 · #EBEAE3 · #E2DFBE · #DAD6B1 · #E3F5F3

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

#F5F5F5

Moonlight White · SeaShell · Cloud White

HEX
#F5F5F5
RGB
rgb(245, 245, 245)
HSL
hsl(0, 0%, 96%)
HSB
hsb(0, 0%, 96%)
CMYK
cmyk(0%, 0%, 0%, 4%)
Oklch
oklch(97.0% 0.000 89.9)

TraditionalMoonlight White」· PaintCloud White」· Creative Morning Mist

#EBEAE3

Fresh Green · Beige · Lemon Cream

HEX
#EBEAE3
RGB
rgb(235, 234, 227)
HSL
hsl(53, 17%, 91%)
HSB
hsb(53, 3%, 92%)
CMYK
cmyk(0%, 0%, 3%, 8%)
Oklch
oklch(93.6% 0.009 100.0)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#E2DFBE

Fresh Green · Wheat · Lemon Cream

HEX
#E2DFBE
RGB
rgb(226, 223, 190)
HSL
hsl(55, 38%, 82%)
HSB
hsb(55, 16%, 89%)
CMYK
cmyk(0%, 1%, 16%, 11%)
Oklch
oklch(89.7% 0.044 103.0)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#DAD6B1

Fresh Green · Wheat · Lemon Cream

HEX
#DAD6B1
RGB
rgb(218, 214, 177)
HSL
hsl(54, 36%, 77%)
HSB
hsb(54, 19%, 85%)
CMYK
cmyk(0%, 2%, 19%, 15%)
Oklch
oklch(87.0% 0.049 102.3)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#E3F5F3

Jade · Lavender · Glacier Blue

HEX
#E3F5F3
RGB
rgb(227, 245, 243)
HSL
hsl(173, 47%, 93%)
HSB
hsb(173, 7%, 96%)
CMYK
cmyk(7%, 0%, 1%, 4%)
Oklch
oklch(95.6% 0.019 188.8)

TraditionalJade」· PaintGlacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F5F5
F5F5F5

Analogous

F5F5F5
F5F5F5
F5F5F5

Triadic

F5F5F5
F5F5F5
F5F5F5

Split-Comp.

F5F5F5
F5F5F5
F5F5F5

Tetradic

F5F5F5
F5F5F5
F5F5F5
F5F5F5

Contrast Matrix WCAG 2.1 Contrast

F5F5F5
EBEAE3
E2DFBE
DAD6B1
E3F5F3
1.1
Fail
1.2
Fail
1.4
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.1
Fail
1.3
Fail
1.0
Fail
1.1
Fail
1.2
Fail
1.3
Fail
White BG
1.1Fail
1.2Fail
1.4Fail
1.5Fail
1.1Fail
Black BG
19.3AAA
17.4AAA
15.5AAA
14.2AAA
18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5F5
EBEBE5
E1E1C6
D8D8BA
EBEBF3

Deuteranopia

F5F5F5
EBEBE5
E1E1C8
D9D9BC
EAE8F4

Tritanopia

F5F5F5
EBE6E6
E2CCCE
DAC1C3
E4F4F4

Achromatopsia

F5F5F5
EAEAEA
DCDCDC
D3D3D3
EFEFEF

Shades & Tints Shades & Tints

#F5F5F5

Dark
Light

#EBEAE3

Dark
Light

#E2DFBE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f5f5;
  --color-2: #ebeae3;
  --color-3: #e2dfbe;
  --color-4: #dad6b1;
  --color-5: #e3f5f3;
}

SCSS

$color-1: #f5f5f5;
$color-2: #ebeae3;
$color-3: #e2dfbe;
$color-4: #dad6b1;
$color-5: #e3f5f3;

TAILWIND

colors: {
  'brand-1': '#f5f5f5',
  'brand-2': '#ebeae3',
  'brand-3': '#e2dfbe',
  'brand-4': '#dad6b1',
  'brand-5': '#e3f5f3',
}

RGB Array

[245, 245, 245], [235, 234, 227], [226, 223, 190], [218, 214, 177], [227, 245, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5F5F5, #EBEAE3, #E2DFBE, #DAD6B1, #E3F5F3 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: #f5f5f5; --color-2: #ebeae3; --color-3: #e2dfbe; --color-4: #dad6b1; --color-5: #e3f5f3. 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