← Back to Editor

#B9CCB8 · #C4B2A1 · #AC96A0 · #87629E · #4C74CB

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 Library

Color Details Color Details

#B9CCB8

Celadon · Silver · Apple Green

HEX
#B9CCB8
RGB
rgb(185, 204, 184)
HSL
hsl(117, 16%, 76%)
HSB
hsb(117, 10%, 80%)
CMYK
cmyk(9%, 0%, 10%, 20%)
Oklch
oklch(82.5% 0.034 143.9)

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

#C4B2A1

Apricot · Tan · Warm Sun

HEX
#C4B2A1
RGB
rgb(196, 178, 161)
HSL
hsl(29, 23%, 70%)
HSB
hsb(29, 18%, 77%)
CMYK
cmyk(0%, 9%, 18%, 23%)
Oklch
oklch(77.4% 0.031 65.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#AC96A0

Rouge · DarkGray · Rose Pink

HEX
#AC96A0
RGB
rgb(172, 150, 160)
HSL
hsl(333, 12%, 63%)
HSB
hsb(333, 13%, 67%)
CMYK
cmyk(0%, 13%, 7%, 33%)
Oklch
oklch(69.6% 0.030 348.7)

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

#87629E

Dark Plum · SlateGray · Violet

HEX
#87629E
RGB
rgb(135, 98, 158)
HSL
hsl(277, 24%, 50%)
HSB
hsb(277, 38%, 62%)
CMYK
cmyk(15%, 38%, 0%, 38%)
Oklch
oklch(55.8% 0.099 311.7)

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

#4C74CB

Azure · SteelBlue · Navy Blue

HEX
#4C74CB
RGB
rgb(76, 116, 203)
HSL
hsl(221, 55%, 55%)
HSB
hsb(221, 63%, 80%)
CMYK
cmyk(63%, 43%, 0%, 20%)
Oklch
oklch(57.3% 0.142 263.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9CCB8
CBB8CC

Analogous

C3CCB8
B9CCB8
B8CCC1

Triadic

B9CCB8
B8B9CC
CCB8B9

Split-Comp.

B9CCB8
C1B8CC
CCB8C3

Tetradic

B9CCB8
B8C3CC
CBB8CC
CCC1B8

Contrast Matrix WCAG 2.1 Contrast

B9CCB8
C4B2A1
AC96A0
87629E
4C74CB
—
1.2
Fail
1.6
Fail
2.9
Fail
2.7
Fail
1.2
Fail
—
1.3
Fail
2.4
Fail
2.2
Fail
1.6
Fail
1.3
Fail
—
1.8
Fail
1.6
Fail
2.9
Fail
2.4
Fail
1.8
Fail
—
1.1
Fail
2.7
Fail
2.2
Fail
1.6
Fail
1.1
Fail
—
White BG
1.7Fail
2.1Fail
2.8Fail
4.9AA
4.5AA Large
Black BG
12.4AAA
10.2AAA
7.6AAA
4.3AA Large
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C1BD
BCBCA5
A2A29E
77778F
5D5EB6

Deuteranopia

C0BFBE
BDBFA6
A4A59D
797C8C
5B58B1

Tritanopia

BAC1C2
C3A8A9
AB9C9B
858482
4EA5A2

Achromatopsia

C4C4C4
B5B5B5
9E9E9E
747474
727272

Shades & Tints Shades & Tints

#B9CCB8

Dark
Light

#C4B2A1

Dark
Light

#AC96A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9ccb8;
  --color-2: #c4b2a1;
  --color-3: #ac96a0;
  --color-4: #87629e;
  --color-5: #4c74cb;
}

SCSS

$color-1: #b9ccb8;
$color-2: #c4b2a1;
$color-3: #ac96a0;
$color-4: #87629e;
$color-5: #4c74cb;

TAILWIND

colors: {
  'brand-1': '#b9ccb8',
  'brand-2': '#c4b2a1',
  'brand-3': '#ac96a0',
  'brand-4': '#87629e',
  'brand-5': '#4c74cb',
}

RGB Array

[185, 204, 184], [196, 178, 161], [172, 150, 160], [135, 98, 158], [76, 116, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B9CCB8, #C4B2A1, #AC96A0, #87629E, #4C74CB 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: #b9ccb8; --color-2: #c4b2a1; --color-3: #ac96a0; --color-4: #87629e; --color-5: #4c74cb. 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 general-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