← Back to Editor

#F4FAEA · #DBE9C7 · #B8D080 · #64A2BD · #39809E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F4FAEA

Willow Green · Linen · Mint Green

HEX
#F4FAEA
RGB
rgb(244, 250, 234)
HSL
hsl(82, 62%, 95%)
HSB
hsb(82, 6%, 98%)
CMYK
cmyk(2%, 0%, 6%, 2%)
Oklch
oklch(97.6% 0.022 123.6)

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

#DBE9C7

Willow Green · LightGray · Mint Green

HEX
#DBE9C7
RGB
rgb(219, 233, 199)
HSL
hsl(85, 44%, 85%)
HSB
hsb(85, 15%, 91%)
CMYK
cmyk(6%, 0%, 15%, 9%)
Oklch
oklch(91.5% 0.048 125.6)

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

#B8D080

Willow Green · Tan · Apple Green

HEX
#B8D080
RGB
rgb(184, 208, 128)
HSL
hsl(78, 46%, 66%)
HSB
hsb(78, 38%, 82%)
CMYK
cmyk(12%, 0%, 38%, 18%)
Oklch
oklch(82.1% 0.108 122.4)

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

#64A2BD

Slate Blue · CadetBlue · Lake Green

HEX
#64A2BD
RGB
rgb(100, 162, 189)
HSL
hsl(198, 40%, 57%)
HSB
hsb(198, 47%, 74%)
CMYK
cmyk(47%, 14%, 0%, 26%)
Oklch
oklch(68.0% 0.075 227.6)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#39809E

Slate Blue · SteelBlue · Mint Ice

HEX
#39809E
RGB
rgb(57, 128, 158)
HSL
hsl(198, 47%, 42%)
HSB
hsb(198, 64%, 62%)
CMYK
cmyk(64%, 19%, 0%, 38%)
Oklch
oklch(56.7% 0.084 228.7)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4FAEA
F0EAFA

Analogous

FAF8EA
F4FAEA
ECFAEA

Triadic

F4FAEA
EAF4FA
FAEAF4

Split-Comp.

F4FAEA
EAECFA
F8EAFA

Tetradic

F4FAEA
EAFAF8
F0EAFA
FAEAEC

Contrast Matrix WCAG 2.1 Contrast

F4FAEA
DBE9C7
B8D080
64A2BD
39809E
—
1.2
Fail
1.6
Fail
2.6
Fail
4.1
AA Large
1.2
Fail
—
1.3
Fail
2.2
Fail
3.5
AA Large
1.6
Fail
1.3
Fail
—
1.7
Fail
2.6
Fail
2.6
Fail
2.2
Fail
1.7
Fail
—
1.6
Fail
4.1
AA Large
3.5
AA Large
2.6
Fail
1.6
Fail
—
White BG
1.1Fail
1.3Fail
1.7Fail
2.8Fail
4.4AA Large
Black BG
19.7AAA
16.5AAA
12.4AAA
7.4AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7EE
E1E1CF
C2C393
7F7FB6
585897

Deuteranopia

F6F6EF
E0DFD1
C1BF98
7B77B5
544E95

Tritanopia

F4F1F2
DCD6D7
B9A3A6
67B1B0
3D9190

Achromatopsia

F6F6F6
E1E1E1
C0C0C0
939393
6E6E6E

Shades & Tints Shades & Tints

#F4FAEA

Dark
Light

#DBE9C7

Dark
Light

#B8D080

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4faea;
  --color-2: #dbe9c7;
  --color-3: #b8d080;
  --color-4: #64a2bd;
  --color-5: #39809e;
}

SCSS

$color-1: #f4faea;
$color-2: #dbe9c7;
$color-3: #b8d080;
$color-4: #64a2bd;
$color-5: #39809e;

TAILWIND

colors: {
  'brand-1': '#f4faea',
  'brand-2': '#dbe9c7',
  'brand-3': '#b8d080',
  'brand-4': '#64a2bd',
  'brand-5': '#39809e',
}

RGB Array

[244, 250, 234], [219, 233, 199], [184, 208, 128], [100, 162, 189], [57, 128, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4FAEA, #DBE9C7, #B8D080, #64A2BD, #39809E is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f4faea; --color-2: #dbe9c7; --color-3: #b8d080; --color-4: #64a2bd; --color-5: #39809e. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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