← Back to Editor

#B7D8C2 · #B2C1BB · #ACAAB4 · #CD8DAC · #F671A4

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

#B7D8C2

Celadon · Silver · Apple Green

HEX
#B7D8C2
RGB
rgb(183, 216, 194)
HSL
hsl(140, 30%, 78%)
HSB
hsb(140, 15%, 85%)
CMYK
cmyk(15%, 0%, 10%, 15%)
Oklch
oklch(85.2% 0.046 156.1)

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

#B2C1BB

Jade · Silver · Apple Green

HEX
#B2C1BB
RGB
rgb(178, 193, 187)
HSL
hsl(156, 11%, 73%)
HSB
hsb(156, 8%, 76%)
CMYK
cmyk(8%, 0%, 3%, 24%)
Oklch
oklch(79.8% 0.018 169.9)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#ACAAB4

Ash · DarkGray · Silver Sand

HEX
#ACAAB4
RGB
rgb(172, 170, 180)
HSL
hsl(252, 6%, 69%)
HSB
hsb(252, 6%, 71%)
CMYK
cmyk(4%, 6%, 0%, 29%)
Oklch
oklch(74.3% 0.014 295.2)

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

#CD8DAC

Rouge · DarkGray · Rose Pink

HEX
#CD8DAC
RGB
rgb(205, 141, 172)
HSL
hsl(331, 39%, 68%)
HSB
hsb(331, 31%, 80%)
CMYK
cmyk(0%, 31%, 16%, 20%)
Oklch
oklch(71.6% 0.087 349.0)

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

#F671A4

Rouge · LightCoral · Rose Pink

HEX
#F671A4
RGB
rgb(246, 113, 164)
HSL
hsl(337, 88%, 70%)
HSB
hsb(337, 54%, 96%)
CMYK
cmyk(0%, 54%, 33%, 4%)
Oklch
oklch(72.1% 0.170 358.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7D8C2
D8B6CD

Analogous

BCD8B6
B7D8C2
B6D8D2

Triadic

B7D8C2
C1B6D8
D8C1B6

Split-Comp.

B7D8C2
D2B6D8
D8B6BC

Tetradic

B7D8C2
B6BCD8
D8B6CD
D8D2B6

Contrast Matrix WCAG 2.1 Contrast

B7D8C2
B2C1BB
ACAAB4
CD8DAC
F671A4
—
1.2
Fail
1.5
Fail
1.7
Fail
1.7
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.4
Fail
1.5
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
1.7
Fail
1.4
Fail
1.1
Fail
—
1.0
Fail
1.7
Fail
1.4
Fail
1.2
Fail
1.0
Fail
—
White BG
1.5Fail
1.9Fail
2.3Fail
2.6Fail
2.7Fail
Black BG
13.6AAA
11.2AAA
9.2AAA
8.0AAA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C6C7
B8B9BC
ABABB2
B1B1A4
BCBB98

Deuteranopia

C3C1C9
B8B7BD
ABABB1
B5BAA3
C4CE95

Tritanopia

B9CCCC
B3BEBE
ACB0AF
CA9F9D
EF8E8C

Achromatopsia

CCCCCC
BCBCBC
ACACAC
A4A4A4
9F9F9F

Shades & Tints Shades & Tints

#B7D8C2

Dark
Light

#B2C1BB

Dark
Light

#ACAAB4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7d8c2;
  --color-2: #b2c1bb;
  --color-3: #acaab4;
  --color-4: #cd8dac;
  --color-5: #f671a4;
}

SCSS

$color-1: #b7d8c2;
$color-2: #b2c1bb;
$color-3: #acaab4;
$color-4: #cd8dac;
$color-5: #f671a4;

TAILWIND

colors: {
  'brand-1': '#b7d8c2',
  'brand-2': '#b2c1bb',
  'brand-3': '#acaab4',
  'brand-4': '#cd8dac',
  'brand-5': '#f671a4',
}

RGB Array

[183, 216, 194], [178, 193, 187], [172, 170, 180], [205, 141, 172], [246, 113, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7D8C2, #B2C1BB, #ACAAB4, #CD8DAC, #F671A4 is ideal for: health products, baby brands, fresh-style blogs. 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: #b7d8c2; --color-2: #b2c1bb; --color-3: #acaab4; --color-4: #cd8dac; --color-5: #f671a4. 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 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