← Back to Editor

#B8D2D7 · #B7B0BC · #B68EA1 · #B46B86 · #B3496B

space

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

#B8D2D7

Sky Blue · LightSteelBlue · Glacier Blue

HEX
#B8D2D7
RGB
rgb(184, 210, 215)
HSL
hsl(190, 28%, 78%)
HSB
hsb(190, 14%, 84%)
CMYK
cmyk(14%, 2%, 0%, 16%)
Oklch
oklch(84.6% 0.029 210.5)

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

#B7B0BC

Lilac · Silver · Pearl Gray

HEX
#B7B0BC
RGB
rgb(183, 176, 188)
HSL
hsl(275, 8%, 71%)
HSB
hsb(275, 6%, 74%)
CMYK
cmyk(3%, 6%, 0%, 26%)
Oklch
oklch(76.7% 0.019 311.5)

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

#B68EA1

Rouge · DarkGray · Rose Pink

HEX
#B68EA1
RGB
rgb(182, 142, 161)
HSL
hsl(332, 22%, 64%)
HSB
hsb(332, 22%, 71%)
CMYK
cmyk(0%, 22%, 12%, 29%)
Oklch
oklch(69.0% 0.055 348.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#B46B86

Dark Violet · Gray · Rose Pink

HEX
#B46B86
RGB
rgb(180, 107, 134)
HSL
hsl(338, 33%, 56%)
HSB
hsb(338, 41%, 71%)
CMYK
cmyk(0%, 41%, 26%, 29%)
Oklch
oklch(61.6% 0.098 356.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#B3496B

Dark Violet · MediumVioletRed · Camellia

HEX
#B3496B
RGB
rgb(179, 73, 107)
HSL
hsl(341, 42%, 49%)
HSB
hsb(341, 59%, 70%)
CMYK
cmyk(0%, 59%, 40%, 30%)
Oklch
oklch(55.4% 0.141 2.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8D2D7
D7BCB7

Analogous

B7D7CC
B8D2D7
B7C2D7

Triadic

B8D2D7
D7B7D1
D1D7B7

Split-Comp.

B8D2D7
D7B7C2
D7CCB7

Tetradic

B8D2D7
CCB7D7
D7BCB7
C2D7B7

Contrast Matrix WCAG 2.1 Contrast

B8D2D7
B7B0BC
B68EA1
B46B86
B3496B
—
1.3
Fail
1.8
Fail
2.5
Fail
3.2
AA Large
1.3
Fail
—
1.3
Fail
1.8
Fail
2.4
Fail
1.8
Fail
1.3
Fail
—
1.4
Fail
1.8
Fail
2.5
Fail
1.8
Fail
1.4
Fail
—
1.3
Fail
3.2
AA Large
2.4
Fail
1.8
Fail
1.3
Fail
—
White BG
1.6Fail
2.1Fail
2.8Fail
3.9AA Large
5.1AA
Black BG
13.2AAA
9.9AAA
7.4AAA
5.4AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C3D6
B4B4B9
A5A49C
94947F
858463

Deuteranopia

C2C0D6
B4B5B8
A7AA9B
999E7E
8B9361

Tritanopia

B9D5D5
B7B7B6
B49998
B07A79
AE5C5B

Achromatopsia

CBCBCB
B3B3B3
9C9C9C
848484
6D6D6D

Shades & Tints Shades & Tints

#B8D2D7

Dark
Light

#B7B0BC

Dark
Light

#B68EA1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8d2d7;
  --color-2: #b7b0bc;
  --color-3: #b68ea1;
  --color-4: #b46b86;
  --color-5: #b3496b;
}

SCSS

$color-1: #b8d2d7;
$color-2: #b7b0bc;
$color-3: #b68ea1;
$color-4: #b46b86;
$color-5: #b3496b;

TAILWIND

colors: {
  'brand-1': '#b8d2d7',
  'brand-2': '#b7b0bc',
  'brand-3': '#b68ea1',
  'brand-4': '#b46b86',
  'brand-5': '#b3496b',
}

RGB Array

[184, 210, 215], [183, 176, 188], [182, 142, 161], [180, 107, 134], [179, 73, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #B8D2D7, #B7B0BC, #B68EA1, #B46B86, #B3496B 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: #b8d2d7; --color-2: #b7b0bc; --color-3: #b68ea1; --color-4: #b46b86; --color-5: #b3496b. 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 space-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