← Back to Editor

#BACFCC · #B4BDAC · #B09D87 · #A87F7D · #7A7175

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 Library

Color Details Color Details

#BACFCC

Jade · Silver · Glacier Blue

HEX
#BACFCC
RGB
rgb(186, 207, 204)
HSL
hsl(171, 18%, 77%)
HSB
hsb(171, 10%, 81%)
CMYK
cmyk(10%, 0%, 1%, 19%)
Oklch
oklch(83.8% 0.023 186.4)

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

#B4BDAC

Celadon · DarkGray · Apple Green

HEX
#B4BDAC
RGB
rgb(180, 189, 172)
HSL
hsl(92, 11%, 71%)
HSB
hsb(92, 9%, 74%)
CMYK
cmyk(5%, 0%, 9%, 26%)
Oklch
oklch(78.7% 0.026 130.0)

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

#B09D87

Ginger · DarkGray · Warm Sun

HEX
#B09D87
RGB
rgb(176, 157, 135)
HSL
hsl(32, 21%, 61%)
HSB
hsb(32, 23%, 69%)
CMYK
cmyk(0%, 11%, 23%, 31%)
Oklch
oklch(70.7% 0.038 71.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#A87F7D

Crimson · Gray · Passion Red

HEX
#A87F7D
RGB
rgb(168, 127, 125)
HSL
hsl(3, 20%, 57%)
HSB
hsb(3, 26%, 66%)
CMYK
cmyk(0%, 24%, 26%, 34%)
Oklch
oklch(63.6% 0.051 21.8)

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

#7A7175

Ink Gray · Gray · Warm Gray

HEX
#7A7175
RGB
rgb(122, 113, 117)
HSL
hsl(333, 4%, 46%)
HSB
hsb(333, 7%, 48%)
CMYK
cmyk(0%, 7%, 4%, 52%)
Oklch
oklch(55.8% 0.013 348.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BACFCC
CFBABD

Analogous

BACFC1
BACFCC
BAC8CF

Triadic

BACFCC
CCBACF
CFCCBA

Split-Comp.

BACFCC
CFBAC8
CFC1BA

Tetradic

BACFCC
C1BACF
CFBABD
C8CFBA

Contrast Matrix WCAG 2.1 Contrast

BACFCC
B4BDAC
B09D87
A87F7D
7A7175
—
1.2
Fail
1.6
Fail
2.1
Fail
2.9
Fail
1.2
Fail
—
1.3
Fail
1.8
Fail
2.4
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.8
Fail
2.1
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
2.9
Fail
2.4
Fail
1.8
Fail
1.3
Fail
—
White BG
1.6Fail
1.9Fail
2.6Fail
3.5AA Large
4.7AA
Black BG
12.9AAA
10.8AAA
8.0AAA
6.0AA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C3CD
B8B8B0
A8A88C
96967D
767674

Deuteranopia

C2C0CD
B7B7B1
A9AA8E
999C7E
777774

Tritanopia

BBCDCD
B4B3B4
AF9191
A67E7E
7A7373

Achromatopsia

C8C8C8
B8B8B8
A0A0A0
8B8B8B
747474

Shades & Tints Shades & Tints

#BACFCC

Dark
Light

#B4BDAC

Dark
Light

#B09D87

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bacfcc;
  --color-2: #b4bdac;
  --color-3: #b09d87;
  --color-4: #a87f7d;
  --color-5: #7a7175;
}

SCSS

$color-1: #bacfcc;
$color-2: #b4bdac;
$color-3: #b09d87;
$color-4: #a87f7d;
$color-5: #7a7175;

TAILWIND

colors: {
  'brand-1': '#bacfcc',
  'brand-2': '#b4bdac',
  'brand-3': '#b09d87',
  'brand-4': '#a87f7d',
  'brand-5': '#7a7175',
}

RGB Array

[186, 207, 204], [180, 189, 172], [176, 157, 135], [168, 127, 125], [122, 113, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #BACFCC, #B4BDAC, #B09D87, #A87F7D, #7A7175 is ideal for: brand design, premium product pages, magazine layouts. 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: #bacfcc; --color-2: #b4bdac; --color-3: #b09d87; --color-4: #a87f7d; --color-5: #7a7175. 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. 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