← Back to Editor

#F0F6F7 · #E1EAEB · #F7F7F7 · #E3F3F3 · #C5D4D4

space

A 5-color space 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

#F0F6F7

Sky Blue · Snow · Glacier Blue

HEX
#F0F6F7
RGB
rgb(240, 246, 247)
HSL
hsl(189, 30%, 95%)
HSB
hsb(189, 3%, 97%)
CMYK
cmyk(3%, 0%, 0%, 3%)
Oklch
oklch(96.9% 0.007 208.8)

TraditionalSky Blue」· PaintGlacier Blue」· Creative Arctic Pool

#E1EAEB

Sky Blue · Lavender · Glacier Blue

HEX
#E1EAEB
RGB
rgb(225, 234, 235)
HSL
hsl(186, 20%, 90%)
HSB
hsb(186, 4%, 92%)
CMYK
cmyk(4%, 0%, 0%, 8%)
Oklch
oklch(93.1% 0.010 204.9)

TraditionalSky Blue」· PaintGlacier Blue」· Creative Arctic Pool

#F7F7F7

Moonlight White · Snow · Cloud White

HEX
#F7F7F7
RGB
rgb(247, 247, 247)
HSL
hsl(0, 0%, 97%)
HSB
hsb(0, 0%, 97%)
CMYK
cmyk(0%, 0%, 0%, 3%)
Oklch
oklch(97.6% 0.000 89.9)

TraditionalMoonlight White」· PaintCloud White」· Creative Morning Mist

#E3F3F3

Sky Blue · Lavender · Glacier Blue

HEX
#E3F3F3
RGB
rgb(227, 243, 243)
HSL
hsl(180, 40%, 92%)
HSB
hsb(180, 7%, 95%)
CMYK
cmyk(7%, 0%, 0%, 5%)
Oklch
oklch(95.2% 0.017 196.9)

TraditionalSky Blue」· PaintGlacier Blue」· Creative Arctic Pool

#C5D4D4

Sky Blue · LightGray · Glacier Blue

HEX
#C5D4D4
RGB
rgb(197, 212, 212)
HSL
hsl(180, 15%, 80%)
HSB
hsb(180, 7%, 83%)
CMYK
cmyk(7%, 0%, 0%, 17%)
Oklch
oklch(85.9% 0.016 196.9)

TraditionalSky Blue」· PaintGlacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0F6F7
F6F0EE

Analogous

EEF6F3
F0F6F7
EEF1F6

Triadic

F0F6F7
F6EEF5
F5F6EE

Split-Comp.

F0F6F7
F6EEF1
F6F3EE

Tetradic

F0F6F7
F3EEF6
F6F0EE
F1F6EE

Contrast Matrix WCAG 2.1 Contrast

F0F6F7
E1EAEB
F7F7F7
E3F3F3
C5D4D4
1.1
Fail
1.0
Fail
1.0
Fail
1.4
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.2
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.4
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.3
Fail
1.4
Fail
1.2
Fail
1.4
Fail
1.3
Fail
White BG
1.1Fail
1.2Fail
1.1Fail
1.1Fail
1.5Fail
Black BG
19.2AAA
17.2AAA
19.6AAA
18.4AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3F7
E5E5EB
F7F7F7
EAEAF3
CBCCD4

Deuteranopia

F2F2F7
E4E4EB
F7F7F7
E9E8F3
CBC9D4

Tritanopia

F0F7F7
E1EBEB
F7F7F7
E4F3F3
C6D4D4

Achromatopsia

F4F4F4
E7E7E7
F7F7F7
EEEEEE
D0D0D0

Shades & Tints Shades & Tints

#F0F6F7

Dark
Light

#E1EAEB

Dark
Light

#F7F7F7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0f6f7;
  --color-2: #e1eaeb;
  --color-3: #f7f7f7;
  --color-4: #e3f3f3;
  --color-5: #c5d4d4;
}

SCSS

$color-1: #f0f6f7;
$color-2: #e1eaeb;
$color-3: #f7f7f7;
$color-4: #e3f3f3;
$color-5: #c5d4d4;

TAILWIND

colors: {
  'brand-1': '#f0f6f7',
  'brand-2': '#e1eaeb',
  'brand-3': '#f7f7f7',
  'brand-4': '#e3f3f3',
  'brand-5': '#c5d4d4',
}

RGB Array

[240, 246, 247], [225, 234, 235], [247, 247, 247], [227, 243, 243], [197, 212, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #F0F6F7, #E1EAEB, #F7F7F7, #E3F3F3, #C5D4D4 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: #f0f6f7; --color-2: #e1eaeb; --color-3: #f7f7f7; --color-4: #e3f3f3; --color-5: #c5d4d4. 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 space-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