← Back to Editor

#B2BABC · #424A4C · #3CB298 · #B1E1B1 · #F8E0C6

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

#B2BABC

Silver Gray · Silver · Pearl Gray

HEX
#B2BABC
RGB
rgb(178, 186, 188)
HSL
hsl(192, 7%, 72%)
HSB
hsb(192, 5%, 74%)
CMYK
cmyk(5%, 1%, 0%, 26%)
Oklch
oklch(78.3% 0.009 214.4)

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

#424A4C

Dark Cyan · DarkSlateGray · Charcoal

HEX
#424A4C
RGB
rgb(66, 74, 76)
HSL
hsl(192, 7%, 28%)
HSB
hsb(192, 13%, 30%)
CMYK
cmyk(13%, 3%, 0%, 70%)
Oklch
oklch(40.3% 0.011 214.4)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#3CB298

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#3CB298
RGB
rgb(60, 178, 152)
HSL
hsl(167, 50%, 47%)
HSB
hsb(167, 66%, 70%)
CMYK
cmyk(66%, 0%, 15%, 30%)
Oklch
oklch(69.1% 0.111 175.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#B1E1B1

Celadon · Silver · Apple Green

HEX
#B1E1B1
RGB
rgb(177, 225, 177)
HSL
hsl(120, 44%, 79%)
HSB
hsb(120, 21%, 88%)
CMYK
cmyk(21%, 0%, 21%, 12%)
Oklch
oklch(86.3% 0.082 144.8)

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

#F8E0C6

Goose Yellow · Bisque · Peach Orange

HEX
#F8E0C6
RGB
rgb(248, 224, 198)
HSL
hsl(31, 78%, 87%)
HSB
hsb(31, 20%, 97%)
CMYK
cmyk(0%, 10%, 20%, 3%)
Oklch
oklch(92.0% 0.043 69.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2BABC
BDB5B3

Analogous

B3BDBA
B2BABC
B3B6BD

Triadic

B2BABC
BDB3BB
BBBDB3

Split-Comp.

B2BABC
BDB3B6
BDBAB3

Tetradic

B2BABC
BAB3BD
BDB5B3
B6BDB3

Contrast Matrix WCAG 2.1 Contrast

B2BABC
424A4C
3CB298
B1E1B1
F8E0C6
—
4.6
AA
1.3
Fail
1.3
Fail
1.5
Fail
4.6
AA
—
3.5
AA Large
6.2
AA
7.1
AAA
1.3
Fail
3.5
AA Large
—
1.8
Fail
2.1
Fail
1.3
Fail
6.2
AA
1.8
Fail
—
1.2
Fail
1.5
Fail
7.1
AAA
2.1
Fail
1.2
Fail
—
White BG
2.0Fail
9.1AAA
2.6Fail
1.5Fail
1.3Fail
Black BG
10.6AAA
2.3Fail
8.0AAA
14.3AAA
16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B6BC
45464C
6F709E
C6C6BD
EEEDCC

Deuteranopia

B5B4BB
45444B
685FA0
C3BFBF
EFF1CE

Tritanopia

B2BBBB
424B4B
42A3A4
B3C6C8
F7D1D2

Achromatopsia

B8B8B8
484848
8C8C8C
CDCDCD
E4E4E4

Shades & Tints Shades & Tints

#B2BABC

Dark
Light

#424A4C

Dark
Light

#3CB298

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2babc;
  --color-2: #424a4c;
  --color-3: #3cb298;
  --color-4: #b1e1b1;
  --color-5: #f8e0c6;
}

SCSS

$color-1: #b2babc;
$color-2: #424a4c;
$color-3: #3cb298;
$color-4: #b1e1b1;
$color-5: #f8e0c6;

TAILWIND

colors: {
  'brand-1': '#b2babc',
  'brand-2': '#424a4c',
  'brand-3': '#3cb298',
  'brand-4': '#b1e1b1',
  'brand-5': '#f8e0c6',
}

RGB Array

[178, 186, 188], [66, 74, 76], [60, 178, 152], [177, 225, 177], [248, 224, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2BABC, #424A4C, #3CB298, #B1E1B1, #F8E0C6 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b2babc; --color-2: #424a4c; --color-3: #3cb298; --color-4: #b1e1b1; --color-5: #f8e0c6. 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 general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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