← Back to Editor

#F6FCF5 · #E5EBE4 · #D9E0D7 · #CAD6C7 · #B4C9AF

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

#F6FCF5

Emerald · Snow · Mint Green

HEX
#F6FCF5
RGB
rgb(246, 252, 245)
HSL
hsl(111, 54%, 97%)
HSB
hsb(111, 3%, 99%)
CMYK
cmyk(2%, 0%, 3%, 1%)
Oklch
oklch(98.5% 0.011 141.3)

TraditionalEmerald」· PaintMint Green」· Creative Mint Breeze

#E5EBE4

Celadon · Beige · Mint Green

HEX
#E5EBE4
RGB
rgb(229, 235, 228)
HSL
hsl(111, 15%, 91%)
HSB
hsb(111, 3%, 92%)
CMYK
cmyk(3%, 0%, 3%, 8%)
Oklch
oklch(93.4% 0.011 141.3)

TraditionalCeladon」· PaintMint Green」· Creative Mint Breeze

#D9E0D7

Celadon · LightGray · Mint Green

HEX
#D9E0D7
RGB
rgb(217, 224, 215)
HSL
hsl(107, 13%, 86%)
HSB
hsb(107, 4%, 88%)
CMYK
cmyk(3%, 0%, 4%, 12%)
Oklch
oklch(89.9% 0.014 138.7)

TraditionalCeladon」· PaintMint Green」· Creative Mint Breeze

#CAD6C7

Celadon · LightGray · Mint Green

HEX
#CAD6C7
RGB
rgb(202, 214, 199)
HSL
hsl(108, 15%, 81%)
HSB
hsb(108, 7%, 84%)
CMYK
cmyk(6%, 0%, 7%, 16%)
Oklch
oklch(86.3% 0.024 139.4)

TraditionalCeladon」· PaintMint Green」· Creative Mint Breeze

#B4C9AF

Celadon · Silver · Apple Green

HEX
#B4C9AF
RGB
rgb(180, 201, 175)
HSL
hsl(108, 19%, 74%)
HSB
hsb(108, 13%, 79%)
CMYK
cmyk(10%, 0%, 13%, 21%)
Oklch
oklch(81.3% 0.043 139.7)

TraditionalCeladon」· PaintApple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6FCF5
FAF3FB

Analogous

F9FBF3
F6FCF5
F3FBF6

Triadic

F6FCF5
F3F4FB
FBF3F4

Split-Comp.

F6FCF5
F6F3FB
FBF3F9

Tetradic

F6FCF5
F3F9FB
FAF3FB
FBF6F3

Contrast Matrix WCAG 2.1 Contrast

F6FCF5
E5EBE4
D9E0D7
CAD6C7
B4C9AF
1.2
Fail
1.3
Fail
1.4
Fail
1.7
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.5
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.3
Fail
1.4
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.7
Fail
1.5
Fail
1.3
Fail
1.2
Fail
White BG
1.0Fail
1.2Fail
1.3Fail
1.5Fail
1.8Fail
Black BG
20.2AAA
17.3AAA
15.6AAA
14.0AAA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9F7
E8E8E6
DCDCD9
CFCFCB
BDBDB5

Deuteranopia

F8F8F7
E7E7E6
DCDBDA
CFCECC
BCBAB7

Tritanopia

F6F8F8
E5E7E7
D9DBDB
CBCDCE
B5BABB

Achromatopsia

F9F9F9
E8E8E8
DDDDDD
D1D1D1
C0C0C0

Shades & Tints Shades & Tints

#F6FCF5

Dark
Light

#E5EBE4

Dark
Light

#D9E0D7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6fcf5;
  --color-2: #e5ebe4;
  --color-3: #d9e0d7;
  --color-4: #cad6c7;
  --color-5: #b4c9af;
}

SCSS

$color-1: #f6fcf5;
$color-2: #e5ebe4;
$color-3: #d9e0d7;
$color-4: #cad6c7;
$color-5: #b4c9af;

TAILWIND

colors: {
  'brand-1': '#f6fcf5',
  'brand-2': '#e5ebe4',
  'brand-3': '#d9e0d7',
  'brand-4': '#cad6c7',
  'brand-5': '#b4c9af',
}

RGB Array

[246, 252, 245], [229, 235, 228], [217, 224, 215], [202, 214, 199], [180, 201, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6FCF5, #E5EBE4, #D9E0D7, #CAD6C7, #B4C9AF 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: #f6fcf5; --color-2: #e5ebe4; --color-3: #d9e0d7; --color-4: #cad6c7; --color-5: #b4c9af. 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