#F1EBDF + #F4E4D7 + #E8D0CC + #DBBEBF + #B3C7D8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1EBDF

Goose Yellow · Beige · Lemon Cream

HEX

#F1EBDF

RGB

rgb(241, 235, 223)

HSL

hsl(40, 39%, 91%)

HSB

hsb(40, 7%, 95%)

CMYK

cmyk(0%, 2%, 7%, 5%)

Oklch

oklch(94.1% 0.017 84.6)

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

#F4E4D7

Apricot · Beige · Peach Orange

HEX

#F4E4D7

RGB

rgb(244, 228, 215)

HSL

hsl(27, 57%, 90%)

HSB

hsb(27, 12%, 96%)

CMYK

cmyk(0%, 7%, 12%, 4%)

Oklch

oklch(92.8% 0.025 61.6)

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

#E8D0CC

Peach Pink · LightGray · Cherry Blossom

HEX

#E8D0CC

RGB

rgb(232, 208, 204)

HSL

hsl(9, 38%, 85%)

HSB

hsb(9, 12%, 91%)

CMYK

cmyk(0%, 10%, 12%, 9%)

Oklch

oklch(87.6% 0.028 29.0)

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

#DBBEBF

Peach Pink · Silver · Coral Red

HEX

#DBBEBF

RGB

rgb(219, 190, 191)

HSL

hsl(358, 29%, 80%)

HSB

hsb(358, 13%, 86%)

CMYK

cmyk(0%, 13%, 13%, 14%)

Oklch

oklch(82.7% 0.033 15.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#B3C7D8

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#B3C7D8

RGB

rgb(179, 199, 216)

HSL

hsl(208, 32%, 77%)

HSB

hsb(208, 17%, 85%)

CMYK

cmyk(17%, 8%, 0%, 15%)

Oklch

oklch(82.0% 0.032 243.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1EBDF

DFE5F1

Analogous

F1E2DF

F1EBDF

EEF1DF

Triadic

F1EBDF

DFF1EB

EBDFF1

Split-Comp.

F1EBDF

DFEEF1

E2DFF1

Tetradic

F1EBDF

DFF1E2

DFE5F1

F1DFEE

Contrast Matrix WCAG 2.1 Contrast

F1EBDF	F4E4D7	E8D0CC	DBBEBF	B3C7D8
—	1.0 Fail	1.2 Fail	1.5 Fail	1.5 Fail
1.0 Fail	—	1.2 Fail	1.4 Fail	1.4 Fail
1.2 Fail	1.2 Fail	—	1.2 Fail	1.2 Fail
1.5 Fail	1.4 Fail	1.2 Fail	—	1.0 Fail
1.5 Fail	1.4 Fail	1.2 Fail	1.0 Fail	—

White BG

1.2Fail

1.5Fail

1.7Fail

Black BG

17.7AAA

16.9AAA

14.3AAA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEEE2

EDEDDA

DEDDCD

CECEBF

BCBCD4

Deuteranopia

EFEFE3

EEEFDB

DFE1CD

D0D2BF

BBB9D3

Tritanopia

F1E4E5

F3DDDD

E7CECE

DABFBF

B4D1D0

Achromatopsia

EBEBEB

E7E7E7

D7D7D7

C7C7C7

C3C3C3

Shades & Tints Shades & Tints

#F1EBDF

Dark

Light

#F4E4D7

Dark

Light

#E8D0CC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1ebdf;
  --color-2: #f4e4d7;
  --color-3: #e8d0cc;
  --color-4: #dbbebf;
  --color-5: #b3c7d8;
}

SCSS

$color-1: #f1ebdf;
$color-2: #f4e4d7;
$color-3: #e8d0cc;
$color-4: #dbbebf;
$color-5: #b3c7d8;

TAILWIND

colors: {
  'brand-1': '#f1ebdf',
  'brand-2': '#f4e4d7',
  'brand-3': '#e8d0cc',
  'brand-4': '#dbbebf',
  'brand-5': '#b3c7d8',
}

RGB Array

[241, 235, 223], [244, 228, 215], [232, 208, 204], [219, 190, 191], [179, 199, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1EBDF, #F4E4D7, #E8D0CC, #DBBEBF, #B3C7D8 is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f1ebdf; --color-2: #f4e4d7; --color-3: #e8d0cc; --color-4: #dbbebf; --color-5: #b3c7d8. 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 tech, SaaS, healthcare, eco industries. 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