← Back to Editor

#F8F7F5 · #EEF0ED · #CCE6E7 · #C6CDD7 · #BABFC3

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

#F8F7F5

Goose Yellow · Snow · Lemon Cream

HEX
#F8F7F5
RGB
rgb(248, 247, 245)
HSL
hsl(40, 18%, 97%)
HSB
hsb(40, 1%, 97%)
CMYK
cmyk(0%, 0%, 1%, 3%)
Oklch
oklch(97.6% 0.003 84.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#EEF0ED

Celadon · Linen · Cloud White

HEX
#EEF0ED
RGB
rgb(238, 240, 237)
HSL
hsl(100, 9%, 94%)
HSB
hsb(100, 1%, 94%)
CMYK
cmyk(1%, 0%, 1%, 6%)
Oklch
oklch(95.3% 0.005 134.9)

Traditional「Celadon」· Paint「Cloud White」· Creative Morning Mist

#CCE6E7

Sky Blue · LightGray · Glacier Blue

HEX
#CCE6E7
RGB
rgb(204, 230, 231)
HSL
hsl(182, 36%, 85%)
HSB
hsb(182, 12%, 91%)
CMYK
cmyk(12%, 0%, 0%, 9%)
Oklch
oklch(90.6% 0.027 199.5)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#C6CDD7

Azure · LightGray · Sky Blue

HEX
#C6CDD7
RGB
rgb(198, 205, 215)
HSL
hsl(215, 18%, 81%)
HSB
hsb(215, 8%, 84%)
CMYK
cmyk(8%, 5%, 0%, 16%)
Oklch
oklch(84.6% 0.016 257.2)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#BABFC3

Silver Gray · Silver · Pearl Gray

HEX
#BABFC3
RGB
rgb(186, 191, 195)
HSL
hsl(207, 7%, 75%)
HSB
hsb(207, 5%, 76%)
CMYK
cmyk(5%, 2%, 0%, 24%)
Oklch
oklch(80.2% 0.008 241.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8F7F5
F6F7F9

Analogous

F9F6F6
F8F7F5
F8F9F6

Triadic

F8F7F5
F6F9F8
F8F6F9

Split-Comp.

F8F7F5
F6F8F9
F6F6F9

Tetradic

F8F7F5
F6F9F6
F6F7F9
F9F6F8

Contrast Matrix WCAG 2.1 Contrast

F8F7F5
EEF0ED
CCE6E7
C6CDD7
BABFC3
—
1.1
Fail
1.2
Fail
1.5
Fail
1.7
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.6
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.5
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.7
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
White BG
1.1Fail
1.1Fail
1.3Fail
1.6Fail
1.9Fail
Black BG
19.6AAA
18.3AAA
16.0AAA
13.1AAA
11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8F5
EFEFEE
D7D7E7
C9C9D5
BCBCC2

Deuteranopia

F8F8F6
EFEFEE
D6D4E7
C9C8D4
BCBCC2

Tritanopia

F8F6F6
EEEEEE
CDE7E7
C6D3D2
BAC1C1

Achromatopsia

F7F7F7
EFEFEF
DEDEDE
CCCCCC
BEBEBE

Shades & Tints Shades & Tints

#F8F7F5

Dark
Light

#EEF0ED

Dark
Light

#CCE6E7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8f7f5;
  --color-2: #eef0ed;
  --color-3: #cce6e7;
  --color-4: #c6cdd7;
  --color-5: #babfc3;
}

SCSS

$color-1: #f8f7f5;
$color-2: #eef0ed;
$color-3: #cce6e7;
$color-4: #c6cdd7;
$color-5: #babfc3;

TAILWIND

colors: {
  'brand-1': '#f8f7f5',
  'brand-2': '#eef0ed',
  'brand-3': '#cce6e7',
  'brand-4': '#c6cdd7',
  'brand-5': '#babfc3',
}

RGB Array

[248, 247, 245], [238, 240, 237], [204, 230, 231], [198, 205, 215], [186, 191, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8F7F5, #EEF0ED, #CCE6E7, #C6CDD7, #BABFC3 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: #f8f7f5; --color-2: #eef0ed; --color-3: #cce6e7; --color-4: #c6cdd7; --color-5: #babfc3. 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