← Back to Editor

#737874 · #BCCCCC · #EFEAE4 · #97A9AD · #B1AFA3

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

#737874

Ink Gray · Gray · Warm Gray

HEX
#737874
RGB
rgb(115, 120, 116)
HSL
hsl(132, 2%, 46%)
HSB
hsb(132, 4%, 47%)
CMYK
cmyk(4%, 0%, 3%, 53%)
Oklch
oklch(56.7% 0.009 151.8)

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

#BCCCCC

Sky Blue · Silver · Glacier Blue

HEX
#BCCCCC
RGB
rgb(188, 204, 204)
HSL
hsl(180, 14%, 77%)
HSB
hsb(180, 8%, 80%)
CMYK
cmyk(8%, 0%, 0%, 20%)
Oklch
oklch(83.3% 0.017 196.8)

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

#EFEAE4

Goose Yellow · Linen · Peach Orange

HEX
#EFEAE4
RGB
rgb(239, 234, 228)
HSL
hsl(33, 26%, 92%)
HSB
hsb(33, 5%, 94%)
CMYK
cmyk(0%, 2%, 5%, 6%)
Oklch
oklch(93.9% 0.010 72.7)

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

#97A9AD

Sky Blue · DarkGray · Lake Green

HEX
#97A9AD
RGB
rgb(151, 169, 173)
HSL
hsl(191, 12%, 64%)
HSB
hsb(191, 13%, 68%)
CMYK
cmyk(13%, 2%, 0%, 32%)
Oklch
oklch(72.2% 0.021 212.6)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B1AFA3

Fresh Green · DarkGray · Silver Sand

HEX
#B1AFA3
RGB
rgb(177, 175, 163)
HSL
hsl(51, 8%, 67%)
HSB
hsb(51, 8%, 69%)
CMYK
cmyk(0%, 1%, 8%, 31%)
Oklch
oklch(75.2% 0.017 99.1)

Traditional「Fresh Green」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

737874
787377

Analogous

747873
737874
737876

Triadic

737874
747378
787473

Split-Comp.

737874
767378
787374

Tetradic

737874
737478
787377
787673

Contrast Matrix WCAG 2.1 Contrast

737874
BCCCCC
EFEAE4
97A9AD
B1AFA3
—
2.7
Fail
3.8
AA Large
1.8
Fail
2.0
Fail
2.7
Fail
—
1.4
Fail
1.5
Fail
1.3
Fail
3.8
AA Large
1.4
Fail
—
2.0
Fail
1.8
Fail
1.8
Fail
1.5
Fail
2.0
Fail
—
1.1
Fail
2.0
Fail
1.3
Fail
1.8
Fail
1.1
Fail
—
White BG
4.5AA Large
1.7Fail
1.2Fail
2.4Fail
2.2Fail
Black BG
4.7AA
12.6AAA
17.6AAA
8.6AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757575
C3C3CC
EDEDE5
9F9FAC
B0B0A6

Deuteranopia

757575
C2C1CC
EDEEE6
9E9CAC
B0B0A7

Tritanopia

737676
BDCCCC
EFE7E7
98ABAB
B1A8A9

Achromatopsia

767676
C7C7C7
EBEBEB
A4A4A4
AEAEAE

Shades & Tints Shades & Tints

#737874

Dark
Light

#BCCCCC

Dark
Light

#EFEAE4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #737874;
  --color-2: #bccccc;
  --color-3: #efeae4;
  --color-4: #97a9ad;
  --color-5: #b1afa3;
}

SCSS

$color-1: #737874;
$color-2: #bccccc;
$color-3: #efeae4;
$color-4: #97a9ad;
$color-5: #b1afa3;

TAILWIND

colors: {
  'brand-1': '#737874',
  'brand-2': '#bccccc',
  'brand-3': '#efeae4',
  'brand-4': '#97a9ad',
  'brand-5': '#b1afa3',
}

RGB Array

[115, 120, 116], [188, 204, 204], [239, 234, 228], [151, 169, 173], [177, 175, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #737874, #BCCCCC, #EFEAE4, #97A9AD, #B1AFA3 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: #737874; --color-2: #bccccc; --color-3: #efeae4; --color-4: #97a9ad; --color-5: #b1afa3. 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