← Back to Editor

#F5DED0 · #E6C7CE · #BCAAB8 · #7385A5 · #646884

cool

A 5-color cool 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

#F5DED0

Apricot · Bisque · Peach Orange

HEX
#F5DED0
RGB
rgb(245, 222, 208)
HSL
hsl(23, 65%, 89%)
HSB
hsb(23, 15%, 96%)
CMYK
cmyk(0%, 9%, 15%, 4%)
Oklch
oklch(91.6% 0.032 53.5)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#E6C7CE

Peach Pink · LightGray · Cherry Blossom

HEX
#E6C7CE
RGB
rgb(230, 199, 206)
HSL
hsl(346, 38%, 84%)
HSB
hsb(346, 13%, 90%)
CMYK
cmyk(0%, 13%, 10%, 10%)
Oklch
oklch(85.8% 0.036 2.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#BCAAB8

Mauve · Silver · Lilac Purple

HEX
#BCAAB8
RGB
rgb(188, 170, 184)
HSL
hsl(313, 12%, 70%)
HSB
hsb(313, 10%, 74%)
CMYK
cmyk(0%, 10%, 2%, 26%)
Oklch
oklch(75.8% 0.028 333.4)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#7385A5

Azure · LightSlateGray · Navy Blue

HEX
#7385A5
RGB
rgb(115, 133, 165)
HSL
hsl(218, 22%, 55%)
HSB
hsb(218, 30%, 65%)
CMYK
cmyk(30%, 19%, 0%, 35%)
Oklch
oklch(61.4% 0.053 261.9)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#646884

Indigo · DimGray · Navy Blue

HEX
#646884
RGB
rgb(100, 104, 132)
HSL
hsl(233, 14%, 45%)
HSB
hsb(233, 24%, 52%)
CMYK
cmyk(24%, 21%, 0%, 48%)
Oklch
oklch(52.4% 0.044 278.4)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5DED0
D1E7F5

Analogous

F5D1D5
F5DED0
F5F1D1

Triadic

F5DED0
D1F5DF
DFD1F5

Split-Comp.

F5DED0
D1F5F1
D1D5F5

Tetradic

F5DED0
D5F5D1
D1E7F5
F1D1F5

Contrast Matrix WCAG 2.1 Contrast

F5DED0
E6C7CE
BCAAB8
7385A5
646884
—
1.2
Fail
1.7
Fail
2.9
Fail
4.2
AA Large
1.2
Fail
—
1.4
Fail
2.4
Fail
3.5
AA Large
1.7
Fail
1.4
Fail
—
1.7
Fail
2.5
Fail
2.9
Fail
2.4
Fail
1.7
Fail
—
1.5
Fail
4.2
AA Large
3.5
AA Large
2.5
Fail
1.5
Fail
—
White BG
1.3Fail
1.6Fail
2.2Fail
3.7AA Large
5.4AA
Black BG
16.2AAA
13.4AAA
9.6AAA
5.6AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBD3
D9D8CC
B4B4B5
7B7B9D
66667D

Deuteranopia

ECEED4
DADDCC
B5B7B4
7A789B
66657C

Tritanopia

F4D6D7
E4CBCB
BBB2B1
749796
647877

Achromatopsia

E3E3E3
D1D1D1
B1B1B1
838383
6A6A6A

Shades & Tints Shades & Tints

#F5DED0

Dark
Light

#E6C7CE

Dark
Light

#BCAAB8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5ded0;
  --color-2: #e6c7ce;
  --color-3: #bcaab8;
  --color-4: #7385a5;
  --color-5: #646884;
}

SCSS

$color-1: #f5ded0;
$color-2: #e6c7ce;
$color-3: #bcaab8;
$color-4: #7385a5;
$color-5: #646884;

TAILWIND

colors: {
  'brand-1': '#f5ded0',
  'brand-2': '#e6c7ce',
  'brand-3': '#bcaab8',
  'brand-4': '#7385a5',
  'brand-5': '#646884',
}

RGB Array

[245, 222, 208], [230, 199, 206], [188, 170, 184], [115, 133, 165], [100, 104, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F5DED0, #E6C7CE, #BCAAB8, #7385A5, #646884 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f5ded0; --color-2: #e6c7ce; --color-3: #bcaab8; --color-4: #7385a5; --color-5: #646884. 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 cool-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