← Back to Editor

#B3AFA6 · #B7CBC8 · #F8F8F1 · #96B0B1 · #CCC4BD

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

#B3AFA6

Ginger · DarkGray · Silver Sand

HEX
#B3AFA6
RGB
rgb(179, 175, 166)
HSL
hsl(42, 8%, 68%)
HSB
hsb(42, 7%, 70%)
CMYK
cmyk(0%, 2%, 7%, 30%)
Oklch
oklch(75.5% 0.013 86.8)

Traditional「Ginger」· Paint「Silver Sand」· Creative Urban Concrete

#B7CBC8

Jade · Silver · Glacier Blue

HEX
#B7CBC8
RGB
rgb(183, 203, 200)
HSL
hsl(171, 16%, 76%)
HSB
hsb(171, 10%, 80%)
CMYK
cmyk(10%, 0%, 1%, 20%)
Oklch
oklch(82.6% 0.022 185.9)

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

#F8F8F1

Fresh Green · SeaShell · Lemon Cream

HEX
#F8F8F1
RGB
rgb(248, 248, 241)
HSL
hsl(60, 33%, 96%)
HSB
hsb(60, 3%, 97%)
CMYK
cmyk(0%, 0%, 3%, 3%)
Oklch
oklch(97.7% 0.009 106.6)

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

#96B0B1

Sky Blue · DarkGray · Lake Green

HEX
#96B0B1
RGB
rgb(150, 176, 177)
HSL
hsl(182, 15%, 64%)
HSB
hsb(182, 15%, 69%)
CMYK
cmyk(15%, 1%, 0%, 31%)
Oklch
oklch(73.8% 0.029 199.4)

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

#CCC4BD

Apricot · Silver · Peach Orange

HEX
#CCC4BD
RGB
rgb(204, 196, 189)
HSL
hsl(28, 13%, 77%)
HSB
hsb(28, 7%, 80%)
CMYK
cmyk(0%, 4%, 7%, 20%)
Oklch
oklch(82.5% 0.013 63.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3AFA6
A7ABB4

Analogous

B4A9A7
B3AFA6
B1B4A7

Triadic

B3AFA6
A7B4B0
B0A7B4

Split-Comp.

B3AFA6
A7B1B4
A9A7B4

Tetradic

B3AFA6
A7B4A9
A7ABB4
B4A7B1

Contrast Matrix WCAG 2.1 Contrast

B3AFA6
B7CBC8
F8F8F1
96B0B1
CCC4BD
—
1.3
Fail
2.1
Fail
1.1
Fail
1.3
Fail
1.3
Fail
—
1.6
Fail
1.4
Fail
1.0
Fail
2.1
Fail
1.6
Fail
—
2.2
Fail
1.6
Fail
1.1
Fail
1.4
Fail
2.2
Fail
—
1.3
Fail
1.3
Fail
1.0
Fail
1.6
Fail
1.3
Fail
—
White BG
2.2Fail
1.7Fail
1.1Fail
2.3Fail
1.7Fail
Black BG
9.6AAA
12.4AAA
19.7AAA
9.1AAA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B1A8
C0C0C9
F8F8F3
A1A1B1
C9C8BF

Deuteranopia

B2B2A9
BFBDC9
F8F8F3
A09EB1
C9CABF

Tritanopia

B3AAAA
B8C9C9
F8F4F4
97B1B1
CCC0C0

Achromatopsia

AFAFAF
C5C5C5
F7F7F7
A8A8A8
C6C6C6

Shades & Tints Shades & Tints

#B3AFA6

Dark
Light

#B7CBC8

Dark
Light

#F8F8F1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3afa6;
  --color-2: #b7cbc8;
  --color-3: #f8f8f1;
  --color-4: #96b0b1;
  --color-5: #ccc4bd;
}

SCSS

$color-1: #b3afa6;
$color-2: #b7cbc8;
$color-3: #f8f8f1;
$color-4: #96b0b1;
$color-5: #ccc4bd;

TAILWIND

colors: {
  'brand-1': '#b3afa6',
  'brand-2': '#b7cbc8',
  'brand-3': '#f8f8f1',
  'brand-4': '#96b0b1',
  'brand-5': '#ccc4bd',
}

RGB Array

[179, 175, 166], [183, 203, 200], [248, 248, 241], [150, 176, 177], [204, 196, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3AFA6, #B7CBC8, #F8F8F1, #96B0B1, #CCC4BD 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: #b3afa6; --color-2: #b7cbc8; --color-3: #f8f8f1; --color-4: #96b0b1; --color-5: #ccc4bd. 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