← Back to Editor

#F5F2FC · #EDE9F2 · #D6CED5 · #B0A9AE · #807A71

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

#F5F2FC

Wisteria · Snow · Sky Blue

HEX
#F5F2FC
RGB
rgb(245, 242, 252)
HSL
hsl(258, 63%, 97%)
HSB
hsb(258, 4%, 99%)
CMYK
cmyk(3%, 4%, 0%, 1%)
Oklch
oklch(96.6% 0.014 299.8)

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

#EDE9F2

Wisteria · Lavender · Lavender

HEX
#EDE9F2
RGB
rgb(237, 233, 242)
HSL
hsl(267, 26%, 93%)
HSB
hsb(267, 4%, 95%)
CMYK
cmyk(2%, 4%, 0%, 5%)
Oklch
oklch(94.0% 0.013 306.0)

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

#D6CED5

Mauve · LightGray · Pearl Gray

HEX
#D6CED5
RGB
rgb(214, 206, 213)
HSL
hsl(308, 9%, 82%)
HSB
hsb(308, 4%, 84%)
CMYK
cmyk(0%, 4%, 0%, 16%)
Oklch
oklch(86.0% 0.013 329.6)

Traditional「Mauve」· Paint「Pearl Gray」· Creative Silver Lining

#B0A9AE

Ash · DarkGray · Silver Sand

HEX
#B0A9AE
RGB
rgb(176, 169, 174)
HSL
hsl(317, 4%, 68%)
HSB
hsb(317, 4%, 69%)
CMYK
cmyk(0%, 4%, 1%, 31%)
Oklch
oklch(74.2% 0.011 335.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#807A71

Ink Gray · Gray · Warm Gray

HEX
#807A71
RGB
rgb(128, 122, 113)
HSL
hsl(36, 6%, 47%)
HSB
hsb(36, 12%, 50%)
CMYK
cmyk(0%, 5%, 12%, 50%)
Oklch
oklch(58.2% 0.015 78.2)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F2FC
F9FCF3

Analogous

F3F4FC
F5F2FC
FAF3FC

Triadic

F5F2FC
FCF5F3
F3FCF5

Split-Comp.

F5F2FC
FCFAF3
F4FCF3

Tetradic

F5F2FC
FCF3F4
F9FCF3
F3FCFA

Contrast Matrix WCAG 2.1 Contrast

F5F2FC
EDE9F2
D6CED5
B0A9AE
807A71
—
1.1
Fail
1.4
Fail
2.1
Fail
3.8
AA Large
1.1
Fail
—
1.3
Fail
1.9
Fail
3.6
AA Large
1.4
Fail
1.3
Fail
—
1.5
Fail
2.8
Fail
2.1
Fail
1.9
Fail
1.5
Fail
—
1.8
Fail
3.8
AA Large
3.6
AA Large
2.8
Fail
1.8
Fail
—
White BG
1.1Fail
1.2Fail
1.5Fail
2.3Fail
4.3AA Large
Black BG
19.0AAA
17.5AAA
13.6AAA
9.1AAA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F4FA
EBEBF0
D3D2D3
ADADAD
7D7D73

Deuteranopia

F4F4F9
ECECEF
D3D4D3
ADAEAD
7E7E74

Tritanopia

F5F8F7
EDEEEE
D6D2D2
B0ACAC
807575

Achromatopsia

F4F4F4
EBEBEB
D1D1D1
ACACAC
7B7B7B

Shades & Tints Shades & Tints

#F5F2FC

Dark
Light

#EDE9F2

Dark
Light

#D6CED5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f2fc;
  --color-2: #ede9f2;
  --color-3: #d6ced5;
  --color-4: #b0a9ae;
  --color-5: #807a71;
}

SCSS

$color-1: #f5f2fc;
$color-2: #ede9f2;
$color-3: #d6ced5;
$color-4: #b0a9ae;
$color-5: #807a71;

TAILWIND

colors: {
  'brand-1': '#f5f2fc',
  'brand-2': '#ede9f2',
  'brand-3': '#d6ced5',
  'brand-4': '#b0a9ae',
  'brand-5': '#807a71',
}

RGB Array

[245, 242, 252], [237, 233, 242], [214, 206, 213], [176, 169, 174], [128, 122, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5F2FC, #EDE9F2, #D6CED5, #B0A9AE, #807A71 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: #f5f2fc; --color-2: #ede9f2; --color-3: #d6ced5; --color-4: #b0a9ae; --color-5: #807a71. 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