#F4DED1 + #EFE5E3 + #D8D0CD + #EBE3E0 + #F6EDE8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4DED1

Apricot · Bisque · Peach Orange

HEX

#F4DED1

RGB

rgb(244, 222, 209)

HSL

hsl(22, 61%, 89%)

HSB

hsb(22, 14%, 96%)

CMYK

cmyk(0%, 9%, 14%, 4%)

Oklch

oklch(91.5% 0.030 52.7)

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

#EFE5E3

Peach Pink · Linen · Cherry Blossom

HEX

#EFE5E3

RGB

rgb(239, 229, 227)

HSL

hsl(10, 27%, 91%)

HSB

hsb(10, 5%, 94%)

CMYK

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

Oklch

oklch(92.9% 0.011 31.1)

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

#D8D0CD

Apricot · LightGray · Peach Orange

HEX

#D8D0CD

RGB

rgb(216, 208, 205)

HSL

hsl(16, 12%, 83%)

HSB

hsb(16, 5%, 85%)

CMYK

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

Oklch

oklch(86.3% 0.010 41.9)

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

#EBE3E0

Apricot · Linen · Peach Orange

HEX

#EBE3E0

RGB

rgb(235, 227, 224)

HSL

hsl(16, 22%, 90%)

HSB

hsb(16, 5%, 92%)

CMYK

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

Oklch

oklch(92.1% 0.010 41.9)

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

#F6EDE8

Apricot · Linen · Peach Orange

HEX

#F6EDE8

RGB

rgb(246, 237, 232)

HSL

hsl(21, 44%, 94%)

HSB

hsb(21, 6%, 96%)

CMYK

cmyk(0%, 4%, 6%, 4%)

Oklch

oklch(95.2% 0.012 51.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4DED1

D2E8F4

Analogous

F4D2D6

F4DED1

F4EFD2

Triadic

F4DED1

D2F4DE

DED2F4

Split-Comp.

F4DED1

D2F4EF

D2D6F4

Tetradic

F4DED1

D6F4D2

D2E8F4

EFD2F4

Contrast Matrix WCAG 2.1 Contrast

F4DED1	EFE5E3	D8D0CD	EBE3E0	F6EDE8
—	1.0 Fail	1.2 Fail	1.0 Fail	1.1 Fail
1.0 Fail	—	1.2 Fail	1.0 Fail	1.1 Fail
1.2 Fail	1.2 Fail	—	1.2 Fail	1.3 Fail
1.0 Fail	1.0 Fail	1.2 Fail	—	1.1 Fail
1.1 Fail	1.1 Fail	1.3 Fail	1.1 Fail	—

White BG

1.3Fail

1.2Fail

1.5Fail

1.3Fail

1.2Fail

Black BG

16.2AAA

17.0AAA

13.8AAA

16.6AAA

18.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAD4

EBEBE3

D5D4CE

E8E7E1

F2F2E9

Deuteranopia

ECEDD5

EBECE4

D5D6CE

E8E9E1

F3F3E9

Tritanopia

F3D7D7

EEE4E4

D8CECE

EBE1E1

F6EAEA

Achromatopsia

E3E3E3

E8E8E8

D2D2D2

E5E5E5

EFEFEF

Shades & Tints Shades & Tints

#F4DED1

Dark

Light

#EFE5E3

Dark

Light

#D8D0CD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4ded1;
  --color-2: #efe5e3;
  --color-3: #d8d0cd;
  --color-4: #ebe3e0;
  --color-5: #f6ede8;
}

SCSS

$color-1: #f4ded1;
$color-2: #efe5e3;
$color-3: #d8d0cd;
$color-4: #ebe3e0;
$color-5: #f6ede8;

TAILWIND

colors: {
  'brand-1': '#f4ded1',
  'brand-2': '#efe5e3',
  'brand-3': '#d8d0cd',
  'brand-4': '#ebe3e0',
  'brand-5': '#f6ede8',
}

RGB Array

[244, 222, 209], [239, 229, 227], [216, 208, 205], [235, 227, 224], [246, 237, 232]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4DED1, #EFE5E3, #D8D0CD, #EBE3E0, #F6EDE8 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: #f4ded1; --color-2: #efe5e3; --color-3: #d8d0cd; --color-4: #ebe3e0; --color-5: #f6ede8. 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