← Back to Editor

#B1ABAB · #E4DAD8 · #D6CDC6 · #DDDFDE · #F1F2ED

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B1ABAB

Ash · DarkGray · Silver Sand

HEX
#B1ABAB
RGB
rgb(177, 171, 171)
HSL
hsl(0, 4%, 68%)
HSB
hsb(0, 3%, 69%)
CMYK
cmyk(0%, 3%, 3%, 31%)
Oklch
oklch(74.6% 0.007 17.3)

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

#E4DAD8

Peach Pink · LightGray · Cherry Blossom

HEX
#E4DAD8
RGB
rgb(228, 218, 216)
HSL
hsl(10, 18%, 87%)
HSB
hsb(10, 5%, 89%)
CMYK
cmyk(0%, 4%, 5%, 11%)
Oklch
oklch(89.6% 0.011 31.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#D6CDC6

Apricot · LightGray · Peach Orange

HEX
#D6CDC6
RGB
rgb(214, 205, 198)
HSL
hsl(26, 16%, 81%)
HSB
hsb(26, 7%, 84%)
CMYK
cmyk(0%, 4%, 7%, 16%)
Oklch
oklch(85.4% 0.014 60.5)

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

#DDDFDE

Plain White · LightGray · Cloud White

HEX
#DDDFDE
RGB
rgb(221, 223, 222)
HSL
hsl(150, 3%, 87%)
HSB
hsb(150, 1%, 87%)
CMYK
cmyk(1%, 0%, 0%, 13%)
Oklch
oklch(90.2% 0.003 165.1)

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

#F1F2ED

Willow Green · Linen · Mint Green

HEX
#F1F2ED
RGB
rgb(241, 242, 237)
HSL
hsl(72, 16%, 94%)
HSB
hsb(72, 2%, 95%)
CMYK
cmyk(0%, 0%, 2%, 5%)
Oklch
oklch(95.9% 0.007 115.7)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1ABAB
AAB1B1

Analogous

B1AAAD
B1ABAB
B1ADAA

Triadic

B1ABAB
AAB1AA
AAAAB1

Split-Comp.

B1ABAB
AAB1AD
AAADB1

Tetradic

B1ABAB
ADB1AA
AAB1B1
ADAAB1

Contrast Matrix WCAG 2.1 Contrast

B1ABAB
E4DAD8
D6CDC6
DDDFDE
F1F2ED
—
1.7
Fail
1.4
Fail
1.7
Fail
2.0
Fail
1.7
Fail
—
1.1
Fail
1.0
Fail
1.2
Fail
1.4
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.7
Fail
1.0
Fail
1.2
Fail
—
1.2
Fail
2.0
Fail
1.2
Fail
1.4
Fail
1.2
Fail
—
White BG
2.3Fail
1.4Fail
1.6Fail
1.3Fail
1.1Fail
Black BG
9.3AAA
15.3AAA
13.4AAA
15.7AAA
18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAEAB
E0E0D8
D2D2C8
DEDEDE
F1F1EE

Deuteranopia

AFAFAB
E0E1D9
D3D3C8
DEDEDE
F1F1EE

Tritanopia

B1ABAB
E4D9D9
D6C9C9
DDDEDE
F1EFEF

Achromatopsia

ADADAD
DDDDDD
CFCFCF
DEDEDE
F1F1F1

Shades & Tints Shades & Tints

#B1ABAB

Dark
Light

#E4DAD8

Dark
Light

#D6CDC6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1abab;
  --color-2: #e4dad8;
  --color-3: #d6cdc6;
  --color-4: #dddfde;
  --color-5: #f1f2ed;
}

SCSS

$color-1: #b1abab;
$color-2: #e4dad8;
$color-3: #d6cdc6;
$color-4: #dddfde;
$color-5: #f1f2ed;

TAILWIND

colors: {
  'brand-1': '#b1abab',
  'brand-2': '#e4dad8',
  'brand-3': '#d6cdc6',
  'brand-4': '#dddfde',
  'brand-5': '#f1f2ed',
}

RGB Array

[177, 171, 171], [228, 218, 216], [214, 205, 198], [221, 223, 222], [241, 242, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1ABAB, #E4DAD8, #D6CDC6, #DDDFDE, #F1F2ED 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: #b1abab; --color-2: #e4dad8; --color-3: #d6cdc6; --color-4: #dddfde; --color-5: #f1f2ed. 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