#F4EEEC + #F4E0E9 + #F4D9D0 + #F2E4CA + #B7DCE1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4EEEC

Apricot · Linen · Peach Orange

HEX

#F4EEEC

RGB

rgb(244, 238, 236)

HSL

hsl(15, 27%, 94%)

HSB

hsb(15, 3%, 96%)

CMYK

cmyk(0%, 2%, 3%, 4%)

Oklch

oklch(95.3% 0.007 39.5)

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

#F4E0E9

Rouge · Linen · Cherry Blossom

HEX

#F4E0E9

RGB

rgb(244, 224, 233)

HSL

hsl(333, 48%, 92%)

HSB

hsb(333, 8%, 96%)

CMYK

cmyk(0%, 8%, 5%, 4%)

Oklch

oklch(92.5% 0.025 348.5)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F4D9D0

Apricot · Bisque · Peach Orange

HEX

#F4D9D0

RGB

rgb(244, 217, 208)

HSL

hsl(15, 62%, 89%)

HSB

hsb(15, 15%, 96%)

CMYK

cmyk(0%, 11%, 15%, 4%)

Oklch

oklch(90.5% 0.033 39.3)

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

#F2E4CA

Goose Yellow · Bisque · Peach Orange

HEX

#F2E4CA

RGB

rgb(242, 228, 202)

HSL

hsl(39, 61%, 87%)

HSB

hsb(39, 17%, 95%)

CMYK

cmyk(0%, 6%, 17%, 5%)

Oklch

oklch(92.3% 0.038 83.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#B7DCE1

Sky Blue · LightBlue · Glacier Blue

HEX

#B7DCE1

RGB

rgb(183, 220, 225)

HSL

hsl(187, 41%, 80%)

HSB

hsb(187, 19%, 88%)

CMYK

cmyk(19%, 2%, 0%, 12%)

Oklch

oklch(86.9% 0.039 206.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4EEEC

ECF2F4

Analogous

F4ECEE

F4EEEC

F4F2EC

Triadic

F4EEEC

ECF4EE

EEECF4

Split-Comp.

F4EEEC

ECF4F2

ECEEF4

Tetradic

F4EEEC

EEF4EC

ECF2F4

F2ECF4

Contrast Matrix WCAG 2.1 Contrast

F4EEEC	F4E0E9	F4D9D0	F2E4CA	B7DCE1
—	1.1 Fail	1.2 Fail	1.1 Fail	1.3 Fail
1.1 Fail	—	1.1 Fail	1.0 Fail	1.2 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.1 Fail	1.0 Fail	1.1 Fail	—	1.2 Fail
1.3 Fail	1.2 Fail	1.1 Fail	1.2 Fail	—

White BG

1.1Fail

1.3Fail

1.5Fail

Black BG

18.3AAA

16.7AAA

15.7AAA

16.7AAA

14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1EC

EBEBE7

E8E8D2

ECECD0

C7C7E0

Deuteranopia

F2F2ED

EDEEE6

EAECD3

EDEED2

C5C2E0

Tritanopia

F4EDED

F3E5E5

F3D4D4

F1D5D6

B9DFDF

Achromatopsia

F0F0F0

E7E7E7

E0E0E0

E5E5E5

D2D2D2

Shades & Tints Shades & Tints

#F4EEEC

Dark

Light

#F4E0E9

Dark

Light

#F4D9D0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4eeec;
  --color-2: #f4e0e9;
  --color-3: #f4d9d0;
  --color-4: #f2e4ca;
  --color-5: #b7dce1;
}

SCSS

$color-1: #f4eeec;
$color-2: #f4e0e9;
$color-3: #f4d9d0;
$color-4: #f2e4ca;
$color-5: #b7dce1;

TAILWIND

colors: {
  'brand-1': '#f4eeec',
  'brand-2': '#f4e0e9',
  'brand-3': '#f4d9d0',
  'brand-4': '#f2e4ca',
  'brand-5': '#b7dce1',
}

RGB Array

[244, 238, 236], [244, 224, 233], [244, 217, 208], [242, 228, 202], [183, 220, 225]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4EEEC, #F4E0E9, #F4D9D0, #F2E4CA, #B7DCE1 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: #f4eeec; --color-2: #f4e0e9; --color-3: #f4d9d0; --color-4: #f2e4ca; --color-5: #b7dce1. 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