#FAFBE4 + #FBFBF4 + #EFF5F9 + #DFECF4 + #D2E4EF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FAFBE4

Fresh Green · LightYellow · Lemon Cream

HEX

#FAFBE4

RGB

rgb(250, 251, 228)

HSL

hsl(63, 74%, 94%)

HSB

hsb(63, 9%, 98%)

CMYK

cmyk(0%, 0%, 9%, 2%)

Oklch

oklch(98.1% 0.030 109.0)

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

#FBFBF4

Fresh Green · Snow · Lemon Cream

HEX

#FBFBF4

RGB

rgb(251, 251, 244)

HSL

hsl(60, 47%, 97%)

HSB

hsb(60, 3%, 98%)

CMYK

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

Oklch

oklch(98.6% 0.009 106.6)

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

#EFF5F9

Sky Blue · Snow · Sky Blue

HEX

#EFF5F9

RGB

rgb(239, 245, 249)

HSL

hsl(204, 45%, 96%)

HSB

hsb(204, 4%, 98%)

CMYK

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

Oklch

oklch(96.7% 0.008 236.6)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#DFECF4

Sky Blue · Lavender · Sky Blue

HEX

#DFECF4

RGB

rgb(223, 236, 244)

HSL

hsl(203, 49%, 92%)

HSB

hsb(203, 9%, 96%)

CMYK

cmyk(9%, 3%, 0%, 4%)

Oklch

oklch(93.6% 0.018 234.5)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#D2E4EF

Sky Blue · Lavender · Sky Blue

HEX

#D2E4EF

RGB

rgb(210, 228, 239)

HSL

hsl(203, 48%, 88%)

HSB

hsb(203, 12%, 94%)

CMYK

cmyk(12%, 5%, 0%, 6%)

Oklch

oklch(90.9% 0.024 234.4)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAFBE4

E6E4FB

Analogous

FBF1E4

FAFBE4

EFFBE4

Triadic

FAFBE4

E4FAFB

FBE4FA

Split-Comp.

FAFBE4

E4EFFB

F1E4FB

Tetradic

FAFBE4

E4FBF1

E6E4FB

FBE4EF

Contrast Matrix WCAG 2.1 Contrast

FAFBE4	FBFBF4	EFF5F9	DFECF4	D2E4EF
—	1.0 Fail	1.0 Fail	1.1 Fail	1.2 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.0 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.1 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.1Fail

1.0Fail

1.1Fail

1.2Fail

1.3Fail

Black BG

20.0AAA

20.2AAA

19.1AAA

17.4AAA

16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAEA

FBFBF6

F2F2F8

E5E5F2

DADAEC

Deuteranopia

FAFAEB

FBFBF6

F1F1F8

E4E3F2

D9D7EC

Tritanopia

FAEEEF

FBF7F7

EFF7F7

E0F1F0

D3EAEA

Achromatopsia

F8F8F8

FAFAFA

F4F4F4

E9E9E9

E0E0E0

Shades & Tints Shades & Tints

#FAFBE4

Dark

Light

#FBFBF4

Dark

Light

#EFF5F9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fafbe4;
  --color-2: #fbfbf4;
  --color-3: #eff5f9;
  --color-4: #dfecf4;
  --color-5: #d2e4ef;
}

SCSS

$color-1: #fafbe4;
$color-2: #fbfbf4;
$color-3: #eff5f9;
$color-4: #dfecf4;
$color-5: #d2e4ef;

TAILWIND

colors: {
  'brand-1': '#fafbe4',
  'brand-2': '#fbfbf4',
  'brand-3': '#eff5f9',
  'brand-4': '#dfecf4',
  'brand-5': '#d2e4ef',
}

RGB Array

[250, 251, 228], [251, 251, 244], [239, 245, 249], [223, 236, 244], [210, 228, 239]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FAFBE4, #FBFBF4, #EFF5F9, #DFECF4, #D2E4EF 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: #fafbe4; --color-2: #fbfbf4; --color-3: #eff5f9; --color-4: #dfecf4; --color-5: #d2e4ef. 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