← Back to Editor

#BBDADC · #CCCCCC · #B1B4A0 · #C485B2 · #756969

A 5-color palette 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

#BBDADC

Sky Blue · LightBlue · Glacier Blue

HEX
#BBDADC
RGB
rgb(187, 218, 220)
HSL
hsl(184, 32%, 80%)
HSB
hsb(184, 15%, 86%)
CMYK
cmyk(15%, 1%, 0%, 14%)
Oklch
oklch(86.6% 0.033 201.3)

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

#CCCCCC

Silver Gray · LightGray · Pearl Gray

HEX
#CCCCCC
RGB
rgb(204, 204, 204)
HSL
hsl(0, 0%, 80%)
HSB
hsb(0, 0%, 80%)
CMYK
cmyk(0%, 0%, 0%, 20%)
Oklch
oklch(84.5% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#B1B4A0

Fresh Green · DarkGray · Sunflower

HEX
#B1B4A0
RGB
rgb(177, 180, 160)
HSL
hsl(69, 12%, 67%)
HSB
hsb(69, 11%, 71%)
CMYK
cmyk(2%, 0%, 11%, 29%)
Oklch
oklch(76.2% 0.028 114.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#C485B2

Mauve · DarkGray · Lilac Purple

HEX
#C485B2
RGB
rgb(196, 133, 178)
HSL
hsl(317, 35%, 65%)
HSB
hsb(317, 32%, 77%)
CMYK
cmyk(0%, 32%, 9%, 23%)
Oklch
oklch(69.4% 0.097 337.7)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#756969

Ink Gray · DimGray · Warm Gray

HEX
#756969
RGB
rgb(117, 105, 105)
HSL
hsl(0, 5%, 44%)
HSB
hsb(0, 10%, 46%)
CMYK
cmyk(0%, 10%, 10%, 54%)
Oklch
oklch(53.2% 0.015 17.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBDADC
DCBEBC

Analogous

BCDCCE
BBDADC
BCCADC

Triadic

BBDADC
DCBCDA
DADCBC

Split-Comp.

BBDADC
DCBCCA
DCCEBC

Tetradic

BBDADC
CEBCDC
DCBEBC
CADCBC

Contrast Matrix WCAG 2.1 Contrast

BBDADC
CCCCCC
B1B4A0
C485B2
756969
—
1.1
Fail
1.4
Fail
1.9
Fail
3.6
AA Large
1.1
Fail
—
1.3
Fail
1.8
Fail
3.3
AA Large
1.4
Fail
1.3
Fail
—
1.3
Fail
2.5
Fail
1.9
Fail
1.8
Fail
1.3
Fail
—
1.8
Fail
3.6
AA Large
3.3
AA Large
2.5
Fail
1.8
Fail
—
White BG
1.5Fail
1.6Fail
2.1Fail
2.9Fail
5.3AA
Black BG
14.2AAA
13.1AAA
9.9AAA
7.3AAA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C9DC
CCCCCC
B2B2A5
A9A8A7
707069

Deuteranopia

C7C4DB
CCCCCC
B2B2A6
ACB1A5
717169

Tritanopia

BDDBDB
CCCCCC
B1A9AA
C19F9D
746969

Achromatopsia

D1D1D1
CCCCCC
B1B1B1
9D9D9D
6D6D6D

Shades & Tints Shades & Tints

#BBDADC

Dark
Light

#CCCCCC

Dark
Light

#B1B4A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbdadc;
  --color-2: #cccccc;
  --color-3: #b1b4a0;
  --color-4: #c485b2;
  --color-5: #756969;
}

SCSS

$color-1: #bbdadc;
$color-2: #cccccc;
$color-3: #b1b4a0;
$color-4: #c485b2;
$color-5: #756969;

TAILWIND

colors: {
  'brand-1': '#bbdadc',
  'brand-2': '#cccccc',
  'brand-3': '#b1b4a0',
  'brand-4': '#c485b2',
  'brand-5': '#756969',
}

RGB Array

[187, 218, 220], [204, 204, 204], [177, 180, 160], [196, 133, 178], [117, 105, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBDADC, #CCCCCC, #B1B4A0, #C485B2, #756969 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: #bbdadc; --color-2: #cccccc; --color-3: #b1b4a0; --color-4: #c485b2; --color-5: #756969. 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 general-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