← Back to Editor

#F5F5F5 · #CFE7EB · #96ADBF · #6A5A74 · #E4B7CB

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F5F5F5

Moonlight White · SeaShell · Cloud White

HEX
#F5F5F5
RGB
rgb(245, 245, 245)
HSL
hsl(0, 0%, 96%)
HSB
hsb(0, 0%, 96%)
CMYK
cmyk(0%, 0%, 0%, 4%)
Oklch
oklch(97.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#CFE7EB

Sky Blue · Lavender · Glacier Blue

HEX
#CFE7EB
RGB
rgb(207, 231, 235)
HSL
hsl(189, 41%, 87%)
HSB
hsb(189, 12%, 92%)
CMYK
cmyk(12%, 2%, 0%, 8%)
Oklch
oklch(91.2% 0.026 208.7)

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

#96ADBF

Sky Blue · DarkGray · Cobalt Blue

HEX
#96ADBF
RGB
rgb(150, 173, 191)
HSL
hsl(206, 24%, 67%)
HSB
hsb(206, 21%, 75%)
CMYK
cmyk(21%, 9%, 0%, 25%)
Oklch
oklch(73.6% 0.037 241.6)

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

#6A5A74

Dark Plum · DimGray · Eggplant

HEX
#6A5A74
RGB
rgb(106, 90, 116)
HSL
hsl(277, 13%, 40%)
HSB
hsb(277, 22%, 45%)
CMYK
cmyk(9%, 22%, 0%, 55%)
Oklch
oklch(49.3% 0.045 312.3)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#E4B7CB

Rouge · Pink · Cherry Blossom

HEX
#E4B7CB
RGB
rgb(228, 183, 203)
HSL
hsl(333, 45%, 81%)
HSB
hsb(333, 20%, 89%)
CMYK
cmyk(0%, 20%, 11%, 11%)
Oklch
oklch(82.5% 0.058 350.0)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F5F5
F5F5F5

Analogous

F5F5F5
F5F5F5
F5F5F5

Triadic

F5F5F5
F5F5F5
F5F5F5

Split-Comp.

F5F5F5
F5F5F5
F5F5F5

Tetradic

F5F5F5
F5F5F5
F5F5F5
F5F5F5

Contrast Matrix WCAG 2.1 Contrast

F5F5F5
CFE7EB
96ADBF
6A5A74
E4B7CB
—
1.2
Fail
2.1
Fail
5.8
AA
1.6
Fail
1.2
Fail
—
1.8
Fail
4.9
AA
1.4
Fail
2.1
Fail
1.8
Fail
—
2.7
Fail
1.3
Fail
5.8
AA
4.9
AA
2.7
Fail
—
3.6
AA Large
1.6
Fail
1.4
Fail
1.3
Fail
3.6
AA Large
—
White BG
1.1Fail
1.3Fail
2.3Fail
6.3AA
1.8Fail
Black BG
19.3AAA
16.3AAA
9.0AAA
3.3AA Large
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5F5
D9DAEA
A0A0BB
63636E
D1D0C6

Deuteranopia

F5F5F5
D8D6EA
9F9DBA
64656C
D3D7C5

Tritanopia

F5F5F5
D0E9E9
97B7B6
696968
E2C2C2

Achromatopsia

F5F5F5
E0E0E0
A8A8A8
626262
C7C7C7

Shades & Tints Shades & Tints

#F5F5F5

Dark
Light

#CFE7EB

Dark
Light

#96ADBF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f5f5;
  --color-2: #cfe7eb;
  --color-3: #96adbf;
  --color-4: #6a5a74;
  --color-5: #e4b7cb;
}

SCSS

$color-1: #f5f5f5;
$color-2: #cfe7eb;
$color-3: #96adbf;
$color-4: #6a5a74;
$color-5: #e4b7cb;

TAILWIND

colors: {
  'brand-1': '#f5f5f5',
  'brand-2': '#cfe7eb',
  'brand-3': '#96adbf',
  'brand-4': '#6a5a74',
  'brand-5': '#e4b7cb',
}

RGB Array

[245, 245, 245], [207, 231, 235], [150, 173, 191], [106, 90, 116], [228, 183, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5F5F5, #CFE7EB, #96ADBF, #6A5A74, #E4B7CB is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #f5f5f5; --color-2: #cfe7eb; --color-3: #96adbf; --color-4: #6a5a74; --color-5: #e4b7cb. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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