← Back to Editor

#F6F1EE · #DEDFE1 · #BFC2CB · #8B8E9D · #7C8290

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

#F6F1EE

Apricot · Linen · Peach Orange

HEX
#F6F1EE
RGB
rgb(246, 241, 238)
HSL
hsl(22, 31%, 95%)
HSB
hsb(22, 3%, 96%)
CMYK
cmyk(0%, 2%, 3%, 4%)
Oklch
oklch(96.1% 0.007 53.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#DEDFE1

Plain White · LightGray · Cloud White

HEX
#DEDFE1
RGB
rgb(222, 223, 225)
HSL
hsl(220, 5%, 88%)
HSB
hsb(220, 1%, 88%)
CMYK
cmyk(1%, 1%, 0%, 12%)
Oklch
oklch(90.3% 0.003 264.5)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#BFC2CB

Azure · Silver · Cobalt Blue

HEX
#BFC2CB
RGB
rgb(191, 194, 203)
HSL
hsl(225, 10%, 77%)
HSB
hsb(225, 6%, 80%)
CMYK
cmyk(6%, 4%, 0%, 20%)
Oklch
oklch(81.4% 0.013 271.3)

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

#8B8E9D

Azure · LightSlateGray · Silver Sand

HEX
#8B8E9D
RGB
rgb(139, 142, 157)
HSL
hsl(230, 8%, 58%)
HSB
hsb(230, 11%, 62%)
CMYK
cmyk(11%, 10%, 0%, 38%)
Oklch
oklch(64.9% 0.023 276.8)

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

#7C8290

Azure · LightSlateGray · Warm Gray

HEX
#7C8290
RGB
rgb(124, 130, 144)
HSL
hsl(222, 8%, 53%)
HSB
hsb(222, 14%, 56%)
CMYK
cmyk(14%, 10%, 0%, 44%)
Oklch
oklch(60.6% 0.022 267.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6F1EE
EEF3F6

Analogous

F6EEEF
F6F1EE
F6F5EE

Triadic

F6F1EE
EEF6F1
F1EEF6

Split-Comp.

F6F1EE
EEF6F5
EEEFF6

Tetradic

F6F1EE
EFF6EE
EEF3F6
F5EEF6

Contrast Matrix WCAG 2.1 Contrast

F6F1EE
DEDFE1
BFC2CB
8B8E9D
7C8290
—
1.2
Fail
1.6
Fail
2.9
Fail
3.4
AA Large
1.2
Fail
—
1.3
Fail
2.4
Fail
2.9
Fail
1.6
Fail
1.3
Fail
—
1.8
Fail
2.2
Fail
2.9
Fail
2.4
Fail
1.8
Fail
—
1.2
Fail
3.4
AA Large
2.9
Fail
2.2
Fail
1.2
Fail
—
White BG
1.1Fail
1.3Fail
1.8Fail
3.3AA Large
3.9AA Large
Black BG
18.7AAA
15.7AAA
11.8AAA
6.5AA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F4EF
DEDEE1
C0C0C9
8C8C99
7F7F8D

Deuteranopia

F4F5EF
DEDEE0
C0C0C8
8C8C99
7E7E8C

Tritanopia

F6EFEF
DEE0E0
BFC7C7
8B9796
7C8A89

Achromatopsia

F2F2F2
DFDFDF
C2C2C2
8F8F8F
828282

Shades & Tints Shades & Tints

#F6F1EE

Dark
Light

#DEDFE1

Dark
Light

#BFC2CB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6f1ee;
  --color-2: #dedfe1;
  --color-3: #bfc2cb;
  --color-4: #8b8e9d;
  --color-5: #7c8290;
}

SCSS

$color-1: #f6f1ee;
$color-2: #dedfe1;
$color-3: #bfc2cb;
$color-4: #8b8e9d;
$color-5: #7c8290;

TAILWIND

colors: {
  'brand-1': '#f6f1ee',
  'brand-2': '#dedfe1',
  'brand-3': '#bfc2cb',
  'brand-4': '#8b8e9d',
  'brand-5': '#7c8290',
}

RGB Array

[246, 241, 238], [222, 223, 225], [191, 194, 203], [139, 142, 157], [124, 130, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6F1EE, #DEDFE1, #BFC2CB, #8B8E9D, #7C8290 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: #f6f1ee; --color-2: #dedfe1; --color-3: #bfc2cb; --color-4: #8b8e9d; --color-5: #7c8290. 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