#F2E9D0 + #FFFFFF + #DAF7EE + #A7C0C4 + #E6DCC5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2E9D0

Goose Yellow · Beige · Lemon Cream

HEX

#F2E9D0

RGB

rgb(242, 233, 208)

HSL

hsl(44, 57%, 88%)

HSB

hsb(44, 14%, 95%)

CMYK

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

Oklch

oklch(93.5% 0.034 90.5)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX

#FFFFFF

RGB

rgb(255, 255, 255)

HSL

hsl(0, 0%, 100%)

HSB

hsb(0, 0%, 100%)

CMYK

cmyk(0%, 0%, 0%, 0%)

Oklch

oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#DAF7EE

Jade · Lavender · Glacier Blue

HEX

#DAF7EE

RGB

rgb(218, 247, 238)

HSL

hsl(161, 64%, 91%)

HSB

hsb(161, 12%, 97%)

CMYK

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

Oklch

oklch(95.3% 0.032 175.0)

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

#A7C0C4

Sky Blue · Silver · Lake Green

HEX

#A7C0C4

RGB

rgb(167, 192, 196)

HSL

hsl(188, 20%, 71%)

HSB

hsb(188, 15%, 77%)

CMYK

cmyk(15%, 2%, 0%, 23%)

Oklch

oklch(79.0% 0.028 208.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#E6DCC5

Goose Yellow · Wheat · Lemon Cream

HEX

#E6DCC5

RGB

rgb(230, 220, 197)

HSL

hsl(42, 40%, 84%)

HSB

hsb(42, 14%, 90%)

CMYK

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

Oklch

oklch(89.6% 0.033 87.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2E9D0

CFD8F2

Analogous

F2D7CF

F2E9D0

EAF2CF

Triadic

F2E9D0

CFF2E9

E9CFF2

Split-Comp.

F2E9D0

CFEAF2

D7CFF2

Tetradic

F2E9D0

CFF2D7

CFD8F2

F2CFEA

Contrast Matrix WCAG 2.1 Contrast

F2E9D0	FFFFFF	DAF7EE	A7C0C4	E6DCC5
—	1.2 Fail	1.1 Fail	1.6 Fail	1.1 Fail
1.2 Fail	—	1.1 Fail	1.9 Fail	1.4 Fail
1.1 Fail	1.1 Fail	—	1.7 Fail	1.2 Fail
1.6 Fail	1.9 Fail	1.7 Fail	—	1.4 Fail
1.1 Fail	1.4 Fail	1.2 Fail	1.4 Fail	—

White BG

1.2Fail

1.0Fail

1.1Fail

1.9Fail

1.4Fail

Black BG

17.3AAA

21.0AAA

18.5AAA

11.0AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEED6

FFFFFF

E7E7F0

B2B2C3

E2E2CB

Deuteranopia

EFEFD8

FFFFFF

E5E3F1

B0AFC3

E2E3CC

Tritanopia

F2DBDC

FFFFFF

DBF2F2

A8C2C2

E6CFD0

Achromatopsia

E9E9E9

FFFFFF

EDEDED

B9B9B9

DCDCDC

Shades & Tints Shades & Tints

#F2E9D0

Dark

Light

#FFFFFF

Dark

Light

#DAF7EE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2e9d0;
  --color-2: #ffffff;
  --color-3: #daf7ee;
  --color-4: #a7c0c4;
  --color-5: #e6dcc5;
}

SCSS

$color-1: #f2e9d0;
$color-2: #ffffff;
$color-3: #daf7ee;
$color-4: #a7c0c4;
$color-5: #e6dcc5;

TAILWIND

colors: {
  'brand-1': '#f2e9d0',
  'brand-2': '#ffffff',
  'brand-3': '#daf7ee',
  'brand-4': '#a7c0c4',
  'brand-5': '#e6dcc5',
}

RGB Array

[242, 233, 208], [255, 255, 255], [218, 247, 238], [167, 192, 196], [230, 220, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2E9D0, #FFFFFF, #DAF7EE, #A7C0C4, #E6DCC5 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: #f2e9d0; --color-2: #ffffff; --color-3: #daf7ee; --color-4: #a7c0c4; --color-5: #e6dcc5. 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