← Back to Editor

#F3ECE4 · #E6D9C8 · #ADB2B6 · #C5CCD6 · #E3E8EE

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

WorkspaceReading

Color Details Color Details

#F3ECE4

Goose Yellow · Linen · Peach Orange

HEX
#F3ECE4
RGB
rgb(243, 236, 228)
HSL
hsl(32, 38%, 92%)
HSB
hsb(32, 6%, 95%)
CMYK
cmyk(0%, 3%, 6%, 5%)
Oklch
oklch(94.6% 0.013 71.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E6D9C8

Goose Yellow · LightGray · Peach Orange

HEX
#E6D9C8
RGB
rgb(230, 217, 200)
HSL
hsl(34, 37%, 84%)
HSB
hsb(34, 13%, 90%)
CMYK
cmyk(0%, 6%, 13%, 10%)
Oklch
oklch(89.1% 0.027 74.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#ADB2B6

Ash · DarkGray · Silver Sand

HEX
#ADB2B6
RGB
rgb(173, 178, 182)
HSL
hsl(207, 6%, 70%)
HSB
hsb(207, 5%, 71%)
CMYK
cmyk(5%, 2%, 0%, 29%)
Oklch
oklch(76.1% 0.008 241.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C5CCD6

Azure · LightGray · Sky Blue

HEX
#C5CCD6
RGB
rgb(197, 204, 214)
HSL
hsl(215, 17%, 81%)
HSB
hsb(215, 8%, 84%)
CMYK
cmyk(8%, 5%, 0%, 16%)
Oklch
oklch(84.3% 0.016 257.2)

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

#E3E8EE

Azure · Lavender · Sky Blue

HEX
#E3E8EE
RGB
rgb(227, 232, 238)
HSL
hsl(213, 24%, 91%)
HSB
hsb(213, 5%, 93%)
CMYK
cmyk(5%, 3%, 0%, 7%)
Oklch
oklch(92.9% 0.010 252.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3ECE4
E3EAF2

Analogous

F2E3E3
F3ECE4
F2F2E3

Triadic

F3ECE4
E3F2EB
EBE3F2

Split-Comp.

F3ECE4
E3F2F2
E3E3F2

Tetradic

F3ECE4
E3F2E3
E3EAF2
F2E3F2

Contrast Matrix WCAG 2.1 Contrast

F3ECE4
E6D9C8
ADB2B6
C5CCD6
E3E8EE
—
1.2
Fail
1.8
Fail
1.4
Fail
1.1
Fail
1.2
Fail
—
1.5
Fail
1.2
Fail
1.1
Fail
1.8
Fail
1.5
Fail
—
1.3
Fail
1.7
Fail
1.4
Fail
1.2
Fail
1.3
Fail
—
1.3
Fail
1.1
Fail
1.1
Fail
1.7
Fail
1.3
Fail
—
White BG
1.2Fail
1.4Fail
2.1Fail
1.6Fail
1.2Fail
Black BG
17.9AAA
15.1AAA
9.8AAA
13.0AAA
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0E6
E0E0CC
AFAFB5
C8C8D4
E5E5ED

Deuteranopia

F0F1E6
E1E2CD
AFAFB5
C8C7D3
E5E4EC

Tritanopia

F3E7E8
E5CFD0
ADB4B4
C5D2D1
E3EBEB

Achromatopsia

EDEDED
DBDBDB
B1B1B1
CBCBCB
E7E7E7

Shades & Tints Shades & Tints

#F3ECE4

Dark
Light

#E6D9C8

Dark
Light

#ADB2B6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3ece4;
  --color-2: #e6d9c8;
  --color-3: #adb2b6;
  --color-4: #c5ccd6;
  --color-5: #e3e8ee;
}

SCSS

$color-1: #f3ece4;
$color-2: #e6d9c8;
$color-3: #adb2b6;
$color-4: #c5ccd6;
$color-5: #e3e8ee;

TAILWIND

colors: {
  'brand-1': '#f3ece4',
  'brand-2': '#e6d9c8',
  'brand-3': '#adb2b6',
  'brand-4': '#c5ccd6',
  'brand-5': '#e3e8ee',
}

RGB Array

[243, 236, 228], [230, 217, 200], [173, 178, 182], [197, 204, 214], [227, 232, 238]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F3ECE4, #E6D9C8, #ADB2B6, #C5CCD6, #E3E8EE 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: #f3ece4; --color-2: #e6d9c8; --color-3: #adb2b6; --color-4: #c5ccd6; --color-5: #e3e8ee. 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 cool-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