← Back to Editor

#F1F1F4 · #DDE1E4 · #ACB6BA · #6E7F97 · #70737A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F1F1F4

Wisteria · SeaShell · Sky Blue

HEX
#F1F1F4
RGB
rgb(241, 241, 244)
HSL
hsl(240, 12%, 95%)
HSB
hsb(240, 1%, 96%)
CMYK
cmyk(1%, 1%, 0%, 4%)
Oklch
oklch(95.9% 0.004 286.3)

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

#DDE1E4

Sky Blue · LightGray · Sky Blue

HEX
#DDE1E4
RGB
rgb(221, 225, 228)
HSL
hsl(206, 11%, 88%)
HSB
hsb(206, 3%, 89%)
CMYK
cmyk(3%, 1%, 0%, 11%)
Oklch
oklch(90.8% 0.006 239.8)

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

#ACB6BA

Sky Blue · DarkGray · Silver Sand

HEX
#ACB6BA
RGB
rgb(172, 182, 186)
HSL
hsl(197, 9%, 70%)
HSB
hsb(197, 8%, 73%)
CMYK
cmyk(8%, 2%, 0%, 27%)
Oklch
oklch(77.0% 0.013 223.6)

Traditional「Sky Blue」· Paint「Silver Sand」· Creative Urban Concrete

#6E7F97

Azure · SlateGray · Navy Blue

HEX
#6E7F97
RGB
rgb(110, 127, 151)
HSL
hsl(215, 16%, 51%)
HSB
hsb(215, 27%, 59%)
CMYK
cmyk(27%, 16%, 0%, 41%)
Oklch
oklch(59.1% 0.042 257.0)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#70737A

Ink Gray · DimGray · Warm Gray

HEX
#70737A
RGB
rgb(112, 115, 122)
HSL
hsl(222, 4%, 46%)
HSB
hsb(222, 8%, 48%)
CMYK
cmyk(8%, 6%, 0%, 52%)
Oklch
oklch(55.5% 0.011 267.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1F1F4
F4F4F1

Analogous

F1F2F4
F1F1F4
F2F1F4

Triadic

F1F1F4
F4F1F1
F1F4F1

Split-Comp.

F1F1F4
F4F2F1
F2F4F1

Tetradic

F1F1F4
F4F1F2
F4F4F1
F1F4F2

Contrast Matrix WCAG 2.1 Contrast

F1F1F4
DDE1E4
ACB6BA
6E7F97
70737A
—
1.2
Fail
1.8
Fail
3.6
AA Large
4.2
AA Large
1.2
Fail
—
1.6
Fail
3.1
AA Large
3.6
AA Large
1.8
Fail
1.6
Fail
—
2.0
Fail
2.3
Fail
3.6
AA Large
3.1
AA Large
2.0
Fail
—
1.2
Fail
4.2
AA Large
3.6
AA Large
2.3
Fail
1.2
Fail
—
White BG
1.1Fail
1.3Fail
2.1Fail
4.1AA Large
4.7AA
Black BG
18.6AAA
16.0AAA
10.2AAA
5.1AA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1F3
DFDFE3
B0B0B9
757691
717178

Deuteranopia

F1F1F3
DFDEE3
B0AFB9
747390
717178

Tritanopia

F1F3F3
DDE3E3
ADB8B8
6F8D8C
707777

Achromatopsia

F1F1F1
E0E0E0
B3B3B3
7D7D7D
737373

Shades & Tints Shades & Tints

#F1F1F4

Dark
Light

#DDE1E4

Dark
Light

#ACB6BA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1f1f4;
  --color-2: #dde1e4;
  --color-3: #acb6ba;
  --color-4: #6e7f97;
  --color-5: #70737a;
}

SCSS

$color-1: #f1f1f4;
$color-2: #dde1e4;
$color-3: #acb6ba;
$color-4: #6e7f97;
$color-5: #70737a;

TAILWIND

colors: {
  'brand-1': '#f1f1f4',
  'brand-2': '#dde1e4',
  'brand-3': '#acb6ba',
  'brand-4': '#6e7f97',
  'brand-5': '#70737a',
}

RGB Array

[241, 241, 244], [221, 225, 228], [172, 182, 186], [110, 127, 151], [112, 115, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1F1F4, #DDE1E4, #ACB6BA, #6E7F97, #70737A 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: #f1f1f4; --color-2: #dde1e4; --color-3: #acb6ba; --color-4: #6e7f97; --color-5: #70737a. 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