← Back to Editor

#B7BCA3 · #19B9C5 · #8CF0D8 · #A6E8D9 · #D2F2D0

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#B7BCA3

Willow Green · DarkGray · Apple Green

HEX
#B7BCA3
RGB
rgb(183, 188, 163)
HSL
hsl(72, 16%, 69%)
HSB
hsb(72, 13%, 74%)
CMYK
cmyk(3%, 0%, 13%, 26%)
Oklch
oklch(78.4% 0.035 116.4)

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

#19B9C5

Lake Blue · LightSeaGreen · Mint Ice

HEX
#19B9C5
RGB
rgb(25, 185, 197)
HSL
hsl(184, 77%, 44%)
HSB
hsb(184, 87%, 77%)
CMYK
cmyk(87%, 6%, 0%, 23%)
Oklch
oklch(71.8% 0.119 203.3)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#8CF0D8

Jade · SkyBlue · Lake Green

HEX
#8CF0D8
RGB
rgb(140, 240, 216)
HSL
hsl(166, 77%, 75%)
HSB
hsb(166, 42%, 94%)
CMYK
cmyk(42%, 0%, 10%, 6%)
Oklch
oklch(88.7% 0.101 176.6)

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

#A6E8D9

Jade · LightBlue · Glacier Blue

HEX
#A6E8D9
RGB
rgb(166, 232, 217)
HSL
hsl(166, 59%, 78%)
HSB
hsb(166, 28%, 91%)
CMYK
cmyk(28%, 0%, 6%, 9%)
Oklch
oklch(88.3% 0.070 178.9)

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

#D2F2D0

Emerald · LightGray · Mint Green

HEX
#D2F2D0
RGB
rgb(210, 242, 208)
HSL
hsl(116, 57%, 88%)
HSB
hsb(116, 14%, 95%)
CMYK
cmyk(13%, 0%, 14%, 5%)
Oklch
oklch(92.9% 0.056 143.5)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7BCA3
A8A3BD

Analogous

BDB5A3
B7BCA3
ABBDA3

Triadic

B7BCA3
A3B8BD
BDA3B8

Split-Comp.

B7BCA3
A3ABBD
B5A3BD

Tetradic

B7BCA3
A3BDB5
A8A3BD
BDA3AB

Contrast Matrix WCAG 2.1 Contrast

B7BCA3
19B9C5
8CF0D8
A6E8D9
D2F2D0
—
1.2
Fail
1.5
Fail
1.4
Fail
1.6
Fail
1.2
Fail
—
1.8
Fail
1.7
Fail
2.0
Fail
1.5
Fail
1.8
Fail
—
1.0
Fail
1.1
Fail
1.4
Fail
1.7
Fail
1.0
Fail
—
1.1
Fail
1.6
Fail
2.0
Fail
1.1
Fail
1.1
Fail
—
White BG
2.0Fail
2.4Fail
1.3Fail
1.4Fail
1.2Fail
Black BG
10.7AAA
8.8AAA
15.6AAA
15.2AAA
17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B9A9
5E60C2
B7B8DE
C3C3DD
E0E0D8

Deuteranopia

B9B9AB
5549C1
B2AADF
BFBADD
DEDCDA

Tritanopia

B7AEAF
21C0BF
91E2E3
A9DFE0
D4DFE0

Achromatopsia

B8B8B8
8B8B8B
CFCFCF
D3D3D3
E5E5E5

Shades & Tints Shades & Tints

#B7BCA3

Dark
Light

#19B9C5

Dark
Light

#8CF0D8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7bca3;
  --color-2: #19b9c5;
  --color-3: #8cf0d8;
  --color-4: #a6e8d9;
  --color-5: #d2f2d0;
}

SCSS

$color-1: #b7bca3;
$color-2: #19b9c5;
$color-3: #8cf0d8;
$color-4: #a6e8d9;
$color-5: #d2f2d0;

TAILWIND

colors: {
  'brand-1': '#b7bca3',
  'brand-2': '#19b9c5',
  'brand-3': '#8cf0d8',
  'brand-4': '#a6e8d9',
  'brand-5': '#d2f2d0',
}

RGB Array

[183, 188, 163], [25, 185, 197], [140, 240, 216], [166, 232, 217], [210, 242, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7BCA3, #19B9C5, #8CF0D8, #A6E8D9, #D2F2D0 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #b7bca3; --color-2: #19b9c5; --color-3: #8cf0d8; --color-4: #a6e8d9; --color-5: #d2f2d0. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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