#F2F1F6 + #D8EAEA + #ECE3BC + #ECBBAA + #E25C7D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2F1F6

Wisteria · SeaShell · Sky Blue

HEX

#F2F1F6

RGB

rgb(242, 241, 246)

HSL

hsl(252, 22%, 95%)

HSB

hsb(252, 2%, 96%)

CMYK

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

Oklch

oklch(96.0% 0.007 295.4)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#D8EAEA

Sky Blue · Lavender · Glacier Blue

HEX

#D8EAEA

RGB

rgb(216, 234, 234)

HSL

hsl(180, 30%, 88%)

HSB

hsb(180, 8%, 92%)

CMYK

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

Oklch

oklch(92.4% 0.019 196.8)

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

#ECE3BC

Goose Yellow · Wheat · Lemon Cream

HEX

#ECE3BC

RGB

rgb(236, 227, 188)

HSL

hsl(49, 56%, 83%)

HSB

hsb(49, 20%, 93%)

CMYK

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

Oklch

oklch(91.3% 0.052 96.5)

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

#ECBBAA

Apricot · LightPink · Peach Orange

HEX

#ECBBAA

RGB

rgb(236, 187, 170)

HSL

hsl(15, 63%, 80%)

HSB

hsb(15, 28%, 93%)

CMYK

cmyk(0%, 21%, 28%, 7%)

Oklch

oklch(83.1% 0.062 40.0)

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

#E25C7D

Peach Pink · LightCoral · Coral Red

HEX

#E25C7D

RGB

rgb(226, 92, 125)

HSL

hsl(345, 70%, 62%)

HSB

hsb(345, 59%, 89%)

CMYK

cmyk(0%, 59%, 45%, 11%)

Oklch

oklch(65.4% 0.169 7.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2F1F6

F4F5EF

Analogous

EFF1F5

F2F1F6

F3EFF5

Triadic

F2F1F6

F5F1EF

EFF5F1

Split-Comp.

F2F1F6

F5F3EF

F1F5EF

Tetradic

F2F1F6

F5EFF1

F4F5EF

EFF5F3

Contrast Matrix WCAG 2.1 Contrast

F2F1F6	D8EAEA	ECE3BC	ECBBAA	E25C7D
—	1.1 Fail	1.1 Fail	1.5 Fail	3.1 AA Large
1.1 Fail	—	1.0 Fail	1.4 Fail	2.8 Fail
1.1 Fail	1.0 Fail	—	1.3 Fail	2.7 Fail
1.5 Fail	1.4 Fail	1.3 Fail	—	2.0 Fail
3.1 AA Large	2.8 Fail	2.7 Fail	2.0 Fail	—

White BG

1.1Fail

1.2Fail

1.3Fail

1.7Fail

3.5AA Large

Black BG

18.7AAA

16.9AAA

16.3AAA

12.3AAA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2F5

E0E0EA

E8E8C5

D7D6AE

A8A775

Deuteranopia

F2F2F5

DFDDEA

E9E9C8

DADDAF

B0BA73

Tritanopia

F2F4F4

D9EAEA

ECCDCF

EAB1B2

DB6F6D

Achromatopsia

F2F2F2

E5E5E5

E1E1E1

C8C8C8

888888

Shades & Tints Shades & Tints

#F2F1F6

Dark

Light

#D8EAEA

Dark

Light

#ECE3BC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2f1f6;
  --color-2: #d8eaea;
  --color-3: #ece3bc;
  --color-4: #ecbbaa;
  --color-5: #e25c7d;
}

SCSS

$color-1: #f2f1f6;
$color-2: #d8eaea;
$color-3: #ece3bc;
$color-4: #ecbbaa;
$color-5: #e25c7d;

TAILWIND

colors: {
  'brand-1': '#f2f1f6',
  'brand-2': '#d8eaea',
  'brand-3': '#ece3bc',
  'brand-4': '#ecbbaa',
  'brand-5': '#e25c7d',
}

RGB Array

[242, 241, 246], [216, 234, 234], [236, 227, 188], [236, 187, 170], [226, 92, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2F1F6, #D8EAEA, #ECE3BC, #ECBBAA, #E25C7D 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: #f2f1f6; --color-2: #d8eaea; --color-3: #ece3bc; --color-4: #ecbbaa; --color-5: #e25c7d. 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