← Back to Editor

#F9FEFC · #DCF5EF · #B6E2E4 · #F6FDFB · #CAF0E7

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

WorkspaceReading

Color Details Color Details

#F9FEFC

Jade · White · Mint Green

HEX
#F9FEFC
RGB
rgb(249, 254, 252)
HSL
hsl(156, 71%, 99%)
HSB
hsb(156, 2%, 100%)
CMYK
cmyk(2%, 0%, 1%, 0%)
Oklch
oklch(99.3% 0.006 170.5)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#DCF5EF

Jade · Lavender · Glacier Blue

HEX
#DCF5EF
RGB
rgb(220, 245, 239)
HSL
hsl(166, 56%, 91%)
HSB
hsb(166, 10%, 96%)
CMYK
cmyk(10%, 0%, 2%, 4%)
Oklch
oklch(95.0% 0.027 179.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#B6E2E4

Sky Blue · LightBlue · Glacier Blue

HEX
#B6E2E4
RGB
rgb(182, 226, 228)
HSL
hsl(183, 46%, 80%)
HSB
hsb(183, 20%, 89%)
CMYK
cmyk(20%, 1%, 0%, 11%)
Oklch
oklch(88.2% 0.046 199.8)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#F6FDFB

Jade · Snow · Glacier Blue

HEX
#F6FDFB
RGB
rgb(246, 253, 251)
HSL
hsl(163, 64%, 98%)
HSB
hsb(163, 3%, 99%)
CMYK
cmyk(3%, 0%, 1%, 1%)
Oklch
oklch(98.8% 0.008 177.3)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#CAF0E7

Jade · Lavender · Glacier Blue

HEX
#CAF0E7
RGB
rgb(202, 240, 231)
HSL
hsl(166, 56%, 87%)
HSB
hsb(166, 16%, 94%)
CMYK
cmyk(16%, 0%, 4%, 6%)
Oklch
oklch(92.6% 0.041 179.4)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9FEFC
FEFBFC

Analogous

FBFEFB
F9FEFC
FBFEFE

Triadic

F9FEFC
FDFBFE
FEFDFB

Split-Comp.

F9FEFC
FEFBFE
FEFBFB

Tetradic

F9FEFC
FBFBFE
FEFBFC
FEFEFB

Contrast Matrix WCAG 2.1 Contrast

F9FEFC
DCF5EF
B6E2E4
F6FDFB
CAF0E7
—
1.1
Fail
1.4
Fail
1.0
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.1
Fail
1.1
Fail
1.4
Fail
1.2
Fail
—
1.4
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.4
Fail
—
1.2
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
White BG
1.0Fail
1.1Fail
1.4Fail
1.0Fail
1.2Fail
Black BG
20.6AAA
18.4AAA
15.0AAA
20.4AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBFC
E7E7F0
C9C9E4
F9F9FB
DADBE9

Deuteranopia

FBFBFD
E5E4F1
C7C3E3
F9F8FC
D8D5EA

Tritanopia

F9FDFD
DDF2F2
B8E3E3
F6FCFC
CCEBEB

Achromatopsia

FCFCFC
EDEDED
D5D5D5
FBFBFB
E4E4E4

Shades & Tints Shades & Tints

#F9FEFC

Dark
Light

#DCF5EF

Dark
Light

#B6E2E4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9fefc;
  --color-2: #dcf5ef;
  --color-3: #b6e2e4;
  --color-4: #f6fdfb;
  --color-5: #caf0e7;
}

SCSS

$color-1: #f9fefc;
$color-2: #dcf5ef;
$color-3: #b6e2e4;
$color-4: #f6fdfb;
$color-5: #caf0e7;

TAILWIND

colors: {
  'brand-1': '#f9fefc',
  'brand-2': '#dcf5ef',
  'brand-3': '#b6e2e4',
  'brand-4': '#f6fdfb',
  'brand-5': '#caf0e7',
}

RGB Array

[249, 254, 252], [220, 245, 239], [182, 226, 228], [246, 253, 251], [202, 240, 231]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9FEFC, #DCF5EF, #B6E2E4, #F6FDFB, #CAF0E7 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: #f9fefc; --color-2: #dcf5ef; --color-3: #b6e2e4; --color-4: #f6fdfb; --color-5: #caf0e7. 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