#F4D5B8 + #F3C7AE + #E6BCA3 + #EEA999 + #BFD7C1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4D5B8

Apricot · Wheat · Peach Orange

HEX

#F4D5B8

RGB

rgb(244, 213, 184)

HSL

hsl(29, 73%, 84%)

HSB

hsb(29, 25%, 96%)

CMYK

cmyk(0%, 13%, 25%, 4%)

Oklch

oklch(89.2% 0.052 65.2)

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

#F3C7AE

Apricot · Wheat · Peach Orange

HEX

#F3C7AE

RGB

rgb(243, 199, 174)

HSL

hsl(22, 74%, 82%)

HSB

hsb(22, 28%, 95%)

CMYK

cmyk(0%, 18%, 28%, 5%)

Oklch

oklch(86.2% 0.061 51.2)

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

#E6BCA3

Apricot · BurlyWood · Peach Orange

HEX

#E6BCA3

RGB

rgb(230, 188, 163)

HSL

hsl(22, 57%, 77%)

HSB

hsb(22, 29%, 90%)

CMYK

cmyk(0%, 18%, 29%, 10%)

Oklch

oklch(82.6% 0.059 52.4)

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

#EEA999

Peach Pink · BurlyWood · Coral Red

HEX

#EEA999

RGB

rgb(238, 169, 153)

HSL

hsl(11, 71%, 77%)

HSB

hsb(11, 36%, 93%)

CMYK

cmyk(0%, 29%, 36%, 7%)

Oklch

oklch(79.6% 0.085 33.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#BFD7C1

Celadon · Silver · Apple Green

HEX

#BFD7C1

RGB

rgb(191, 215, 193)

HSL

hsl(125, 23%, 80%)

HSB

hsb(125, 11%, 84%)

CMYK

cmyk(11%, 0%, 10%, 16%)

Oklch

oklch(85.5% 0.040 147.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4D5B8

B8D7F4

Analogous

F4B8B9

F4D5B8

F4F3B8

Triadic

F4D5B8

B8F4D5

D5B8F4

Split-Comp.

F4D5B8

B8F4F3

B8B9F4

Tetradic

F4D5B8

B9F4B8

B8D7F4

F3B8F4

Contrast Matrix WCAG 2.1 Contrast

F4D5B8	F3C7AE	E6BCA3	EEA999	BFD7C1
—	1.1 Fail	1.2 Fail	1.4 Fail	1.1 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.0 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.3 Fail
1.1 Fail	1.0 Fail	1.1 Fail	1.3 Fail	—

White BG

1.4Fail

1.5Fail

1.7Fail

1.9Fail

1.5Fail

Black BG

15.1AAA

13.6AAA

12.1AAA

10.8AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E6BF

E0E0B4

D4D3A9

D0D09D

C9CAC6

Deuteranopia

E8EBC1

E3E6B6

D6D9AB

D4D99E

C8C6C8

Tritanopia

F2C5C6

F1B9BA

E4AEAF

EBA0A1

C0CBCB

Achromatopsia

DBDBDB

D1D1D1

C6C6C6

BCBCBC

CDCDCD

Shades & Tints Shades & Tints

#F4D5B8

Dark

Light

#F3C7AE

Dark

Light

#E6BCA3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4d5b8;
  --color-2: #f3c7ae;
  --color-3: #e6bca3;
  --color-4: #eea999;
  --color-5: #bfd7c1;
}

SCSS

$color-1: #f4d5b8;
$color-2: #f3c7ae;
$color-3: #e6bca3;
$color-4: #eea999;
$color-5: #bfd7c1;

TAILWIND

colors: {
  'brand-1': '#f4d5b8',
  'brand-2': '#f3c7ae',
  'brand-3': '#e6bca3',
  'brand-4': '#eea999',
  'brand-5': '#bfd7c1',
}

RGB Array

[244, 213, 184], [243, 199, 174], [230, 188, 163], [238, 169, 153], [191, 215, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4D5B8, #F3C7AE, #E6BCA3, #EEA999, #BFD7C1 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: #f4d5b8; --color-2: #f3c7ae; --color-3: #e6bca3; --color-4: #eea999; --color-5: #bfd7c1. 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