← Back to Editor

#F9FBF9 · #DFE7DE · #BDCDBC · #E0E9D0 · #F0F5E8

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F9FBF9

Celadon · Snow · Mint Green

HEX
#F9FBF9
RGB
rgb(249, 251, 249)
HSL
hsl(120, 20%, 98%)
HSB
hsb(120, 1%, 98%)
CMYK
cmyk(1%, 0%, 1%, 2%)
Oklch
oklch(98.6% 0.003 145.5)

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

#DFE7DE

Celadon · LightGray · Mint Green

HEX
#DFE7DE
RGB
rgb(223, 231, 222)
HSL
hsl(113, 16%, 89%)
HSB
hsb(113, 4%, 91%)
CMYK
cmyk(3%, 0%, 4%, 9%)
Oklch
oklch(91.9% 0.015 142.2)

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

#BDCDBC

Celadon · Silver · Apple Green

HEX
#BDCDBC
RGB
rgb(189, 205, 188)
HSL
hsl(116, 15%, 77%)
HSB
hsb(116, 8%, 80%)
CMYK
cmyk(8%, 0%, 8%, 20%)
Oklch
oklch(83.1% 0.029 143.7)

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

#E0E9D0

Willow Green · LightGray · Mint Green

HEX
#E0E9D0
RGB
rgb(224, 233, 208)
HSL
hsl(82, 36%, 86%)
HSB
hsb(82, 11%, 91%)
CMYK
cmyk(4%, 0%, 11%, 9%)
Oklch
oklch(92.1% 0.035 123.2)

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

#F0F5E8

Willow Green · Linen · Mint Green

HEX
#F0F5E8
RGB
rgb(240, 245, 232)
HSL
hsl(83, 39%, 94%)
HSB
hsb(83, 5%, 96%)
CMYK
cmyk(2%, 0%, 5%, 4%)
Oklch
oklch(96.3% 0.018 124.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9FBF9
FBF9FB

Analogous

FAFBF9
F9FBF9
F9FBFA

Triadic

F9FBF9
F9F9FB
FBF9F9

Split-Comp.

F9FBF9
FAF9FB
FBF9FA

Tetradic

F9FBF9
F9FAFB
FBF9FB
FBFAF9

Contrast Matrix WCAG 2.1 Contrast

F9FBF9
DFE7DE
BDCDBC
E0E9D0
F0F5E8
—
1.2
Fail
1.6
Fail
1.2
Fail
1.1
Fail
1.2
Fail
—
1.3
Fail
1.0
Fail
1.1
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
1.2
Fail
1.0
Fail
1.3
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
1.5
Fail
1.1
Fail
—
White BG
1.0Fail
1.3Fail
1.7Fail
1.3Fail
1.1Fail
Black BG
20.2AAA
16.6AAA
12.6AAA
16.7AAA
18.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAF9
E2E3E0
C4C4C0
E4E4D6
F2F2EB

Deuteranopia

FAFAFA
E2E1E1
C3C2C1
E3E3D8
F2F2EC

Tritanopia

F9FAFA
DFE2E2
BEC3C4
E0DBDC
F0EEEE

Achromatopsia

FAFAFA
E4E4E4
C6C6C6
E3E3E3
F2F2F2

Shades & Tints Shades & Tints

#F9FBF9

Dark
Light

#DFE7DE

Dark
Light

#BDCDBC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9fbf9;
  --color-2: #dfe7de;
  --color-3: #bdcdbc;
  --color-4: #e0e9d0;
  --color-5: #f0f5e8;
}

SCSS

$color-1: #f9fbf9;
$color-2: #dfe7de;
$color-3: #bdcdbc;
$color-4: #e0e9d0;
$color-5: #f0f5e8;

TAILWIND

colors: {
  'brand-1': '#f9fbf9',
  'brand-2': '#dfe7de',
  'brand-3': '#bdcdbc',
  'brand-4': '#e0e9d0',
  'brand-5': '#f0f5e8',
}

RGB Array

[249, 251, 249], [223, 231, 222], [189, 205, 188], [224, 233, 208], [240, 245, 232]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9FBF9, #DFE7DE, #BDCDBC, #E0E9D0, #F0F5E8 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f9fbf9; --color-2: #dfe7de; --color-3: #bdcdbc; --color-4: #e0e9d0; --color-5: #f0f5e8. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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