#B0C3BB + #9CD9BF + #B4E3B1 + #D9F59D + #A2F2D0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B0C3BB

Jade · Silver · Apple Green

HEX

#B0C3BB

RGB

rgb(176, 195, 187)

HSL

hsl(155, 14%, 73%)

HSB

hsb(155, 10%, 76%)

CMYK

cmyk(10%, 0%, 4%, 24%)

Oklch

oklch(80.0% 0.024 168.6)

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

#9CD9BF

Jade · LightSteelBlue · Apple Green

HEX

#9CD9BF

RGB

rgb(156, 217, 191)

HSL

hsl(154, 45%, 73%)

HSB

hsb(154, 28%, 85%)

CMYK

cmyk(28%, 0%, 12%, 15%)

Oklch

oklch(83.6% 0.072 166.4)

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

#B4E3B1

Celadon · Silver · Apple Green

HEX

#B4E3B1

RGB

rgb(180, 227, 177)

HSL

hsl(116, 47%, 79%)

HSB

hsb(116, 22%, 89%)

CMYK

cmyk(21%, 0%, 22%, 11%)

Oklch

oklch(87.0% 0.084 143.3)

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

#D9F59D

Willow Green · Khaki · Apple Green

HEX

#D9F59D

RGB

rgb(217, 245, 157)

HSL

hsl(79, 81%, 79%)

HSB

hsb(79, 36%, 96%)

CMYK

cmyk(11%, 0%, 36%, 4%)

Oklch

oklch(93.0% 0.116 123.0)

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

#A2F2D0

Jade · LightBlue · Apple Green

HEX

#A2F2D0

RGB

rgb(162, 242, 208)

HSL

hsl(155, 75%, 79%)

HSB

hsb(155, 33%, 95%)

CMYK

cmyk(33%, 0%, 14%, 5%)

Oklch

oklch(90.0% 0.092 165.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0C3BB

C4B1B9

Analogous

B1C4B2

B0C3BB

B1C2C4

Triadic

B0C3BB

BCB1C4

C4BCB1

Split-Comp.

B0C3BB

C4B1C2

C4B2B1

Tetradic

B0C3BB

B2B1C4

C4B1B9

C2C4B1

Contrast Matrix WCAG 2.1 Contrast

B0C3BB	9CD9BF	B4E3B1	D9F59D	A2F2D0
—	1.2 Fail	1.3 Fail	1.5 Fail	1.4 Fail
1.2 Fail	—	1.1 Fail	1.3 Fail	1.2 Fail
1.3 Fail	1.1 Fail	—	1.2 Fail	1.1 Fail
1.5 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
1.4 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.8Fail

1.6Fail

1.4Fail

1.2Fail

1.3Fail

Black BG

11.4AAA

13.1AAA

14.6AAA

17.5AAA

16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B8BD

B6B7C5

C8C9BD

E5E5B2

C5C5D8

Deuteranopia

B7B6BD

B3AEC7

C6C2C0

E4E1B7

C0BADA

Tritanopia

B1BEBF

9FCACB

B6C7C9

DAC3C7

A6DFE0

Achromatopsia

BCBCBC

C4C4C4

CFCFCF

E3E3E3

D6D6D6

Shades & Tints Shades & Tints

#B0C3BB

Dark

Light

#9CD9BF

Dark

Light

#B4E3B1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0c3bb;
  --color-2: #9cd9bf;
  --color-3: #b4e3b1;
  --color-4: #d9f59d;
  --color-5: #a2f2d0;
}

SCSS

$color-1: #b0c3bb;
$color-2: #9cd9bf;
$color-3: #b4e3b1;
$color-4: #d9f59d;
$color-5: #a2f2d0;

TAILWIND

colors: {
  'brand-1': '#b0c3bb',
  'brand-2': '#9cd9bf',
  'brand-3': '#b4e3b1',
  'brand-4': '#d9f59d',
  'brand-5': '#a2f2d0',
}

RGB Array

[176, 195, 187], [156, 217, 191], [180, 227, 177], [217, 245, 157], [162, 242, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0C3BB, #9CD9BF, #B4E3B1, #D9F59D, #A2F2D0 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: #b0c3bb; --color-2: #9cd9bf; --color-3: #b4e3b1; --color-4: #d9f59d; --color-5: #a2f2d0. 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