← Back to Editor

#F6F5F7 · #F0F0F2 · #FBFAFC · #EFEDF0 · #F3F3F3

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#F6F5F7

Lilac · Snow · Lavender

HEX
#F6F5F7
RGB
rgb(246, 245, 247)
HSL
hsl(270, 11%, 96%)
HSB
hsb(270, 1%, 97%)
CMYK
cmyk(0%, 1%, 0%, 3%)
Oklch
oklch(97.1% 0.003 308.4)

TraditionalLilac」· PaintLavender」· Creative Lavender Dream

#F0F0F2

Plain White · Linen · Cloud White

HEX
#F0F0F2
RGB
rgb(240, 240, 242)
HSL
hsl(240, 7%, 95%)
HSB
hsb(240, 1%, 95%)
CMYK
cmyk(1%, 1%, 0%, 5%)
Oklch
oklch(95.6% 0.003 286.3)

TraditionalPlain White」· PaintCloud White」· Creative Morning Mist

#FBFAFC

Lilac · Snow · Lavender

HEX
#FBFAFC
RGB
rgb(251, 250, 252)
HSL
hsl(270, 25%, 98%)
HSB
hsb(270, 1%, 99%)
CMYK
cmyk(0%, 1%, 0%, 1%)
Oklch
oklch(98.6% 0.003 308.4)

TraditionalLilac」· PaintLavender」· Creative Lavender Dream

#EFEDF0

Lilac · Lavender · Cloud White

HEX
#EFEDF0
RGB
rgb(239, 237, 240)
HSL
hsl(280, 9%, 94%)
HSB
hsb(280, 1%, 94%)
CMYK
cmyk(0%, 1%, 0%, 6%)
Oklch
oklch(94.8% 0.005 314.8)

TraditionalLilac」· PaintCloud White」· Creative Morning Mist

#F3F3F3

Plain White · SeaShell · Cloud White

HEX
#F3F3F3
RGB
rgb(243, 243, 243)
HSL
hsl(0, 0%, 95%)
HSB
hsb(0, 0%, 95%)
CMYK
cmyk(0%, 0%, 0%, 5%)
Oklch
oklch(96.4% 0.000 89.9)

TraditionalPlain White」· PaintCloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6F5F7
F5F6F4

Analogous

F4F4F6
F6F5F7
F6F4F6

Triadic

F6F5F7
F6F5F4
F4F6F5

Split-Comp.

F6F5F7
F6F6F4
F4F6F4

Tetradic

F6F5F7
F6F4F4
F5F6F4
F4F6F6

Contrast Matrix WCAG 2.1 Contrast

F6F5F7
F0F0F2
FBFAFC
EFEDF0
F3F3F3
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
White BG
1.1Fail
1.1Fail
1.0Fail
1.2Fail
1.1Fail
Black BG
19.3AAA
18.5AAA
20.2AAA
18.0AAA
18.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6F7
F0F0F2
FBFBFC
EEEEEF
F3F3F3

Deuteranopia

F6F6F6
F0F0F1
FBFBFB
EEEEEF
F3F3F3

Tritanopia

F6F6F6
F0F1F1
FBFBFB
EFEFEF
F3F3F3

Achromatopsia

F6F6F6
F0F0F0
FBFBFB
EEEEEE
F3F3F3

Shades & Tints Shades & Tints

#F6F5F7

Dark
Light

#F0F0F2

Dark
Light

#FBFAFC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6f5f7;
  --color-2: #f0f0f2;
  --color-3: #fbfafc;
  --color-4: #efedf0;
  --color-5: #f3f3f3;
}

SCSS

$color-1: #f6f5f7;
$color-2: #f0f0f2;
$color-3: #fbfafc;
$color-4: #efedf0;
$color-5: #f3f3f3;

TAILWIND

colors: {
  'brand-1': '#f6f5f7',
  'brand-2': '#f0f0f2',
  'brand-3': '#fbfafc',
  'brand-4': '#efedf0',
  'brand-5': '#f3f3f3',
}

RGB Array

[246, 245, 247], [240, 240, 242], [251, 250, 252], [239, 237, 240], [243, 243, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F6F5F7, #F0F0F2, #FBFAFC, #EFEDF0, #F3F3F3 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: #f6f5f7; --color-2: #f0f0f2; --color-3: #fbfafc; --color-4: #efedf0; --color-5: #f3f3f3. 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 pastel-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