← Back to Editor

#5A4741 · #689384 · #B9D9CE · #E5F1EA · #FFFFFF

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

#5A4741

Crimson · DarkOliveGreen · Wine Red

HEX
#5A4741
RGB
rgb(90, 71, 65)
HSL
hsl(14, 16%, 30%)
HSB
hsb(14, 28%, 35%)
CMYK
cmyk(0%, 21%, 28%, 65%)
Oklch
oklch(41.6% 0.028 38.3)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#689384

Mineral Blue · SlateGray · Olive Green

HEX
#689384
RGB
rgb(104, 147, 132)
HSL
hsl(159, 17%, 49%)
HSB
hsb(159, 29%, 58%)
CMYK
cmyk(29%, 0%, 10%, 42%)
Oklch
oklch(62.7% 0.052 170.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#B9D9CE

Jade · LightBlue · Apple Green

HEX
#B9D9CE
RGB
rgb(185, 217, 206)
HSL
hsl(159, 30%, 79%)
HSB
hsb(159, 15%, 85%)
CMYK
cmyk(15%, 0%, 5%, 15%)
Oklch
oklch(85.9% 0.037 172.6)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#E5F1EA

Celadon · Lavender · Mint Green

HEX
#E5F1EA
RGB
rgb(229, 241, 234)
HSL
hsl(145, 30%, 92%)
HSB
hsb(145, 5%, 95%)
CMYK
cmyk(5%, 0%, 3%, 5%)
Oklch
oklch(94.7% 0.016 160.6)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A4741
405359

Analogous

594047
5A4741
595240

Triadic

5A4741
405946
464059

Split-Comp.

5A4741
405952
404759

Tetradic

5A4741
475940
405359
524059

Contrast Matrix WCAG 2.1 Contrast

5A4741
689384
B9D9CE
E5F1EA
FFFFFF
—
2.5
Fail
5.8
AA
7.5
AAA
8.7
AAA
2.5
Fail
—
2.3
Fail
3.0
Fail
3.4
AA Large
5.8
AA
2.3
Fail
—
1.3
Fail
1.5
Fail
7.5
AAA
3.0
Fail
1.3
Fail
—
1.2
Fail
8.7
AAA
3.4
AA Large
1.5
Fail
1.2
Fail
—
White BG
8.7AAA
3.4AA Large
1.5Fail
1.2Fail
1.0Fail
Black BG
2.4Fail
6.1AA
13.9AAA
18.1AAA
21.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

525242
7B7B88
C7C7D1
EAEAEC
FFFFFF

Deuteranopia

535443
787589
C5C3D1
EAE9EC
FFFFFF

Tritanopia

594444
6A8A8B
BBD3D3
E6EDED
FFFFFF

Achromatopsia

4C4C4C
848484
CECECE
EDEDED
FFFFFF

Shades & Tints Shades & Tints

#5A4741

Dark
Light

#689384

Dark
Light

#B9D9CE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a4741;
  --color-2: #689384;
  --color-3: #b9d9ce;
  --color-4: #e5f1ea;
  --color-5: #ffffff;
}

SCSS

$color-1: #5a4741;
$color-2: #689384;
$color-3: #b9d9ce;
$color-4: #e5f1ea;
$color-5: #ffffff;

TAILWIND

colors: {
  'brand-1': '#5a4741',
  'brand-2': '#689384',
  'brand-3': '#b9d9ce',
  'brand-4': '#e5f1ea',
  'brand-5': '#ffffff',
}

RGB Array

[90, 71, 65], [104, 147, 132], [185, 217, 206], [229, 241, 234], [255, 255, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #5A4741, #689384, #B9D9CE, #E5F1EA, #FFFFFF 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: #5a4741; --color-2: #689384; --color-3: #b9d9ce; --color-4: #e5f1ea; --color-5: #ffffff. 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 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