← Back to Editor

#ECF6EE · #C0DEE8 · #7E8B82 · #797262 · #524638

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#ECF6EE

Celadon · Linen · Mint Green

HEX
#ECF6EE
RGB
rgb(236, 246, 238)
HSL
hsl(132, 36%, 95%)
HSB
hsb(132, 4%, 96%)
CMYK
cmyk(4%, 0%, 3%, 4%)
Oklch
oklch(96.3% 0.015 151.8)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#C0DEE8

Sky Blue · LightBlue · Glacier Blue

HEX
#C0DEE8
RGB
rgb(192, 222, 232)
HSL
hsl(195, 47%, 83%)
HSB
hsb(195, 17%, 91%)
CMYK
cmyk(17%, 4%, 0%, 9%)
Oklch
oklch(88.2% 0.035 219.9)

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

#7E8B82

Ash · Gray · Warm Gray

HEX
#7E8B82
RGB
rgb(126, 139, 130)
HSL
hsl(138, 5%, 52%)
HSB
hsb(138, 9%, 55%)
CMYK
cmyk(9%, 0%, 6%, 45%)
Oklch
oklch(62.3% 0.020 155.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#797262

Ochre · DimGray · Honey Gold

HEX
#797262
RGB
rgb(121, 114, 98)
HSL
hsl(42, 11%, 43%)
HSB
hsb(42, 19%, 47%)
CMYK
cmyk(0%, 6%, 19%, 53%)
Oklch
oklch(55.4% 0.025 87.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#524638

Ochre · DarkOliveGreen · Amber Brown

HEX
#524638
RGB
rgb(82, 70, 56)
HSL
hsl(32, 19%, 27%)
HSB
hsb(32, 32%, 32%)
CMYK
cmyk(0%, 15%, 32%, 68%)
Oklch
oklch(40.2% 0.028 71.2)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF6EE
F7EEF5

Analogous

F0F7EE
ECF6EE
EEF7F4

Triadic

ECF6EE
EFEEF7
F7EFEE

Split-Comp.

ECF6EE
F4EEF7
F7EEF0

Tetradic

ECF6EE
EEF0F7
F7EEF5
F7F4EE

Contrast Matrix WCAG 2.1 Contrast

ECF6EE
C0DEE8
7E8B82
797262
524638
—
1.3
Fail
3.2
AA Large
4.3
AA Large
8.3
AAA
1.3
Fail
—
2.5
Fail
3.4
AA Large
6.5
AA
3.2
AA Large
2.5
Fail
—
1.3
Fail
2.6
Fail
4.3
AA Large
3.4
AA Large
1.3
Fail
—
1.9
Fail
8.3
AAA
6.5
AA
2.6
Fail
1.9
Fail
—
White BG
1.1Fail
1.4Fail
3.6AA Large
4.8AA
9.2AAA
Black BG
19.0AAA
14.9AAA
5.9AA
4.4AA Large
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0F0
CDCDE6
848484
767666
4D4D3B

Deuteranopia

F0EFF0
CBC9E5
838285
767767
4E4E3C

Tritanopia

EDF1F2
C1E4E3
7F8686
79696A
513E3F

Achromatopsia

F2F2F2
D6D6D6
868686
727272
484848

Shades & Tints Shades & Tints

#ECF6EE

Dark
Light

#C0DEE8

Dark
Light

#7E8B82

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf6ee;
  --color-2: #c0dee8;
  --color-3: #7e8b82;
  --color-4: #797262;
  --color-5: #524638;
}

SCSS

$color-1: #ecf6ee;
$color-2: #c0dee8;
$color-3: #7e8b82;
$color-4: #797262;
$color-5: #524638;

TAILWIND

colors: {
  'brand-1': '#ecf6ee',
  'brand-2': '#c0dee8',
  'brand-3': '#7e8b82',
  'brand-4': '#797262',
  'brand-5': '#524638',
}

RGB Array

[236, 246, 238], [192, 222, 232], [126, 139, 130], [121, 114, 98], [82, 70, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #ECF6EE, #C0DEE8, #7E8B82, #797262, #524638 is ideal for: brand design, premium product pages, magazine layouts, 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: #ecf6ee; --color-2: #c0dee8; --color-3: #7e8b82; --color-4: #797262; --color-5: #524638. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. 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