#F4F8F1 + #E1F1B5 + #E1DAAA + #D2B9C4 + #D794AD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4F8F1

Celadon · SeaShell · Mint Green

HEX

#F4F8F1

RGB

rgb(244, 248, 241)

HSL

hsl(94, 33%, 96%)

HSB

hsb(94, 3%, 97%)

CMYK

cmyk(2%, 0%, 3%, 3%)

Oklch

oklch(97.4% 0.010 131.4)

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

#E1F1B5

Willow Green · Wheat · Mint Green

HEX

#E1F1B5

RGB

rgb(225, 241, 181)

HSL

hsl(76, 68%, 83%)

HSB

hsb(76, 25%, 95%)

CMYK

cmyk(7%, 0%, 25%, 5%)

Oklch

oklch(93.2% 0.080 120.1)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#E1DAAA

Fresh Green · Wheat · Lemon Cream

HEX

#E1DAAA

RGB

rgb(225, 218, 170)

HSL

hsl(52, 48%, 77%)

HSB

hsb(52, 24%, 88%)

CMYK

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

Oklch

oklch(88.2% 0.063 100.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#D2B9C4

Rouge · Silver · Cherry Blossom

HEX

#D2B9C4

RGB

rgb(210, 185, 196)

HSL

hsl(334, 22%, 77%)

HSB

hsb(334, 12%, 82%)

CMYK

cmyk(0%, 12%, 7%, 18%)

Oklch

oklch(81.0% 0.032 349.4)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#D794AD

Rouge · Tan · Rose Pink

HEX

#D794AD

RGB

rgb(215, 148, 173)

HSL

hsl(338, 46%, 71%)

HSB

hsb(338, 31%, 84%)

CMYK

cmyk(0%, 31%, 20%, 16%)

Oklch

oklch(74.0% 0.086 355.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4F8F1

F5F1F8

Analogous

F8F8F1

F4F8F1

F1F8F2

Triadic

F4F8F1

F1F4F8

F8F1F4

Split-Comp.

F4F8F1

F2F1F8

F8F1F8

Tetradic

F4F8F1

F1F8F8

F5F1F8

F8F2F1

Contrast Matrix WCAG 2.1 Contrast

F4F8F1	E1F1B5	E1DAAA	D2B9C4	D794AD
—	1.1 Fail	1.3 Fail	1.7 Fail	2.2 Fail
1.1 Fail	—	1.2 Fail	1.5 Fail	2.0 Fail
1.3 Fail	1.2 Fail	—	1.3 Fail	1.7 Fail
1.7 Fail	1.5 Fail	1.3 Fail	—	1.3 Fail
2.2 Fail	2.0 Fail	1.7 Fail	1.3 Fail	—

White BG

1.1Fail

1.2Fail

1.4Fail

1.8Fail

2.4Fail

Black BG

19.5AAA

17.5AAA

14.8AAA

11.5AAA

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6F3

E8E8C4

DEDEB6

C7C7C1

BAB9A7

Deuteranopia

F6F5F3

E7E6C7

DEDFB8

C9CBC1

BEC3A6

Tritanopia

F4F4F4

E2CFD2

E1BFC1

D1BFBF

D4A2A1

Achromatopsia

F6F6F6

E5E5E5

D7D7D7

C2C2C2

ABABAB

Shades & Tints Shades & Tints

#F4F8F1

Dark

Light

#E1F1B5

Dark

Light

#E1DAAA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4f8f1;
  --color-2: #e1f1b5;
  --color-3: #e1daaa;
  --color-4: #d2b9c4;
  --color-5: #d794ad;
}

SCSS

$color-1: #f4f8f1;
$color-2: #e1f1b5;
$color-3: #e1daaa;
$color-4: #d2b9c4;
$color-5: #d794ad;

TAILWIND

colors: {
  'brand-1': '#f4f8f1',
  'brand-2': '#e1f1b5',
  'brand-3': '#e1daaa',
  'brand-4': '#d2b9c4',
  'brand-5': '#d794ad',
}

RGB Array

[244, 248, 241], [225, 241, 181], [225, 218, 170], [210, 185, 196], [215, 148, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4F8F1, #E1F1B5, #E1DAAA, #D2B9C4, #D794AD 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: #f4f8f1; --color-2: #e1f1b5; --color-3: #e1daaa; --color-4: #d2b9c4; --color-5: #d794ad. 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