← Back to Editor

#B782B5 · #D3C6B9 · #BCC3CB · #879BB1 · #7980A0

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

#B782B5

Mauve · DarkGray · Lilac Purple

HEX
#B782B5
RGB
rgb(183, 130, 181)
HSL
hsl(302, 27%, 61%)
HSB
hsb(302, 29%, 72%)
CMYK
cmyk(0%, 29%, 1%, 28%)
Oklch
oklch(67.6% 0.095 327.8)

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

#D3C6B9

Goose Yellow · Silver · Peach Orange

HEX
#D3C6B9
RGB
rgb(211, 198, 185)
HSL
hsl(30, 23%, 78%)
HSB
hsb(30, 12%, 83%)
CMYK
cmyk(0%, 6%, 12%, 17%)
Oklch
oklch(83.4% 0.023 67.5)

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

#BCC3CB

Azure · Silver · Cobalt Blue

HEX
#BCC3CB
RGB
rgb(188, 195, 203)
HSL
hsl(212, 13%, 77%)
HSB
hsb(212, 7%, 80%)
CMYK
cmyk(7%, 4%, 0%, 20%)
Oklch
oklch(81.4% 0.014 251.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#879BB1

Azure · LightSlateGray · Cobalt Blue

HEX
#879BB1
RGB
rgb(135, 155, 177)
HSL
hsl(211, 21%, 61%)
HSB
hsb(211, 24%, 69%)
CMYK
cmyk(24%, 12%, 0%, 31%)
Oklch
oklch(68.1% 0.040 250.9)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#7980A0

Azure · LightSlateGray · Navy Blue

HEX
#7980A0
RGB
rgb(121, 128, 160)
HSL
hsl(229, 17%, 55%)
HSB
hsb(229, 24%, 63%)
CMYK
cmyk(24%, 20%, 0%, 37%)
Oklch
oklch(60.6% 0.049 275.2)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B782B5
81B682

Analogous

9D81B6
B782B5
B6819A

Triadic

B782B5
B5B681
81B5B6

Split-Comp.

B782B5
9AB681
81B69D

Tetradic

B782B5
B69D81
81B682
819AB6

Contrast Matrix WCAG 2.1 Contrast

B782B5
D3C6B9
BCC3CB
879BB1
7980A0
—
1.8
Fail
1.7
Fail
1.1
Fail
1.3
Fail
1.8
Fail
—
1.1
Fail
1.7
Fail
2.3
Fail
1.7
Fail
1.1
Fail
—
1.6
Fail
2.2
Fail
1.1
Fail
1.7
Fail
1.6
Fail
—
1.4
Fail
1.3
Fail
2.3
Fail
2.2
Fail
1.4
Fail
—
White BG
3.1AA Large
1.7Fail
1.8Fail
2.9Fail
3.9AA Large
Black BG
6.9AA
12.5AAA
11.8AAA
7.4AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A0A9
CDCDBC
BFBFC9
9090AC
7C7C98

Deuteranopia

A3A7A6
CECFBD
BFBEC9
8F8DAA
7C7B96

Tritanopia

B49F9D
D2BFBF
BCC8C7
88A7A7
799291

Achromatopsia

989898
C8C8C8
C2C2C2
989898
828282

Shades & Tints Shades & Tints

#B782B5

Dark
Light

#D3C6B9

Dark
Light

#BCC3CB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b782b5;
  --color-2: #d3c6b9;
  --color-3: #bcc3cb;
  --color-4: #879bb1;
  --color-5: #7980a0;
}

SCSS

$color-1: #b782b5;
$color-2: #d3c6b9;
$color-3: #bcc3cb;
$color-4: #879bb1;
$color-5: #7980a0;

TAILWIND

colors: {
  'brand-1': '#b782b5',
  'brand-2': '#d3c6b9',
  'brand-3': '#bcc3cb',
  'brand-4': '#879bb1',
  'brand-5': '#7980a0',
}

RGB Array

[183, 130, 181], [211, 198, 185], [188, 195, 203], [135, 155, 177], [121, 128, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B782B5, #D3C6B9, #BCC3CB, #879BB1, #7980A0 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: #b782b5; --color-2: #d3c6b9; --color-3: #bcc3cb; --color-4: #879bb1; --color-5: #7980a0. 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