#F3E9DD + #D7E2DD + #A9BAAE + #F6EDE4 + #FAD7C4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F3E9DD

Goose Yellow · Beige · Peach Orange

HEX

#F3E9DD

RGB

rgb(243, 233, 221)

HSL

hsl(33, 48%, 91%)

HSB

hsb(33, 9%, 95%)

CMYK

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

Oklch

oklch(93.9% 0.019 72.6)

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

#D7E2DD

Jade · LightGray · Mint Green

HEX

#D7E2DD

RGB

rgb(215, 226, 221)

HSL

hsl(153, 16%, 86%)

HSB

hsb(153, 5%, 89%)

CMYK

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

Oklch

oklch(90.3% 0.014 167.1)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#A9BAAE

Celadon · DarkGray · Apple Green

HEX

#A9BAAE

RGB

rgb(169, 186, 174)

HSL

hsl(138, 11%, 70%)

HSB

hsb(138, 9%, 73%)

CMYK

cmyk(9%, 0%, 6%, 27%)

Oklch

oklch(77.2% 0.025 155.0)

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

#F6EDE4

Goose Yellow · Linen · Peach Orange

HEX

#F6EDE4

RGB

rgb(246, 237, 228)

HSL

hsl(30, 50%, 93%)

HSB

hsb(30, 7%, 96%)

CMYK

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

Oklch

oklch(95.1% 0.015 67.6)

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

#FAD7C4

Apricot · Bisque · Peach Orange

HEX

#FAD7C4

RGB

rgb(250, 215, 196)

HSL

hsl(21, 84%, 87%)

HSB

hsb(21, 22%, 98%)

CMYK

cmyk(0%, 14%, 22%, 2%)

Oklch

oklch(90.4% 0.047 50.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3E9DD

DDE7F3

Analogous

F3DEDD

F3E9DD

F2F3DD

Triadic

F3E9DD

DDF3E9

E9DDF3

Split-Comp.

F3E9DD

DDF2F3

DEDDF3

Tetradic

F3E9DD

DDF3DE

DDE7F3

F3DDF2

Contrast Matrix WCAG 2.1 Contrast

F3E9DD	D7E2DD	A9BAAE	F6EDE4	FAD7C4
—	1.1 Fail	1.7 Fail	1.0 Fail	1.1 Fail
1.1 Fail	—	1.5 Fail	1.1 Fail	1.0 Fail
1.7 Fail	1.5 Fail	—	1.8 Fail	1.5 Fail
1.0 Fail	1.1 Fail	1.8 Fail	—	1.2 Fail
1.1 Fail	1.0 Fail	1.5 Fail	1.2 Fail	—

White BG

1.2Fail

1.3Fail

2.0Fail

1.2Fail

1.3Fail

Black BG

17.5AAA

15.8AAA

10.3AAA

18.2AAA

15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFE0

DCDCDE

B0B1B1

F2F2E6

EBEBC9

Deuteranopia

EFF0E1

DBDADF

AFAEB2

F3F3E7

EDF0CA

Tritanopia

F3E2E3

D8DFDF

AAB3B4

F6E8E8

F8CCCD

Achromatopsia

EBEBEB

DEDEDE

B4B4B4

EFEFEF

DFDFDF

Shades & Tints Shades & Tints

#F3E9DD

Dark

Light

#D7E2DD

Dark

Light

#A9BAAE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3e9dd;
  --color-2: #d7e2dd;
  --color-3: #a9baae;
  --color-4: #f6ede4;
  --color-5: #fad7c4;
}

SCSS

$color-1: #f3e9dd;
$color-2: #d7e2dd;
$color-3: #a9baae;
$color-4: #f6ede4;
$color-5: #fad7c4;

TAILWIND

colors: {
  'brand-1': '#f3e9dd',
  'brand-2': '#d7e2dd',
  'brand-3': '#a9baae',
  'brand-4': '#f6ede4',
  'brand-5': '#fad7c4',
}

RGB Array

[243, 233, 221], [215, 226, 221], [169, 186, 174], [246, 237, 228], [250, 215, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3E9DD, #D7E2DD, #A9BAAE, #F6EDE4, #FAD7C4 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: #f3e9dd; --color-2: #d7e2dd; --color-3: #a9baae; --color-4: #f6ede4; --color-5: #fad7c4. 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