#F9F9DC + #ECF2D0 + #E2EECB + #CFE7C2 + #B9E1BD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F9F9DC

Fresh Green · Beige · Lemon Cream

HEX

#F9F9DC

RGB

rgb(249, 249, 220)

HSL

hsl(60, 71%, 92%)

HSB

hsb(60, 12%, 98%)

CMYK

cmyk(0%, 0%, 12%, 2%)

Oklch

oklch(97.5% 0.038 107.1)

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

#ECF2D0

Willow Green · Beige · Mint Green

HEX

#ECF2D0

RGB

rgb(236, 242, 208)

HSL

hsl(71, 57%, 88%)

HSB

hsb(71, 14%, 95%)

CMYK

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

Oklch

oklch(94.8% 0.045 115.4)

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

#E2EECB

Willow Green · Beige · Mint Green

HEX

#E2EECB

RGB

rgb(226, 238, 203)

HSL

hsl(81, 51%, 86%)

HSB

hsb(81, 15%, 93%)

CMYK

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

Oklch

oklch(93.1% 0.048 122.7)

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

#CFE7C2

Celadon · LightGray · Mint Green

HEX

#CFE7C2

RGB

rgb(207, 231, 194)

HSL

hsl(99, 44%, 83%)

HSB

hsb(99, 16%, 91%)

CMYK

cmyk(10%, 0%, 16%, 9%)

Oklch

oklch(90.1% 0.056 134.5)

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

#B9E1BD

Celadon · Silver · Apple Green

HEX

#B9E1BD

RGB

rgb(185, 225, 189)

HSL

hsl(126, 40%, 80%)

HSB

hsb(126, 18%, 88%)

CMYK

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

Oklch

oklch(87.1% 0.065 147.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9F9DC

DCDCF9

Analogous

F9EBDC

F9F9DC

EBF9DC

Triadic

F9F9DC

DCF9F9

F9DCF9

Split-Comp.

F9F9DC

DCEBF9

EBDCF9

Tetradic

F9F9DC

DCF9EB

DCDCF9

F9DCEB

Contrast Matrix WCAG 2.1 Contrast

F9F9DC	ECF2D0	E2EECB	CFE7C2	B9E1BD
—	1.1 Fail	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	—	1.0 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.3 Fail	1.2 Fail	1.2 Fail	1.1 Fail	—

White BG

1.1Fail

1.2Fail

1.3Fail

1.4Fail

Black BG

19.6AAA

18.2AAA

17.3AAA

15.9AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9E3

EFEFD8

E7E7D3

D9DACB

CACBC6

Deuteranopia

F9F9E5

EEEEDA

E7E6D6

D8D6CD

C8C5C8

Tritanopia

F9E9EA

ECDFE0

E3DADC

D0D2D4

BBCDCE

Achromatopsia

F6F6F6

ECECEC

E6E6E6

DCDCDC

D1D1D1

Shades & Tints Shades & Tints

#F9F9DC

Dark

Light

#ECF2D0

Dark

Light

#E2EECB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9f9dc;
  --color-2: #ecf2d0;
  --color-3: #e2eecb;
  --color-4: #cfe7c2;
  --color-5: #b9e1bd;
}

SCSS

$color-1: #f9f9dc;
$color-2: #ecf2d0;
$color-3: #e2eecb;
$color-4: #cfe7c2;
$color-5: #b9e1bd;

TAILWIND

colors: {
  'brand-1': '#f9f9dc',
  'brand-2': '#ecf2d0',
  'brand-3': '#e2eecb',
  'brand-4': '#cfe7c2',
  'brand-5': '#b9e1bd',
}

RGB Array

[249, 249, 220], [236, 242, 208], [226, 238, 203], [207, 231, 194], [185, 225, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9F9DC, #ECF2D0, #E2EECB, #CFE7C2, #B9E1BD 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: #f9f9dc; --color-2: #ecf2d0; --color-3: #e2eecb; --color-4: #cfe7c2; --color-5: #b9e1bd. 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