#BCCDA6 + #F4FCDE + #D7FDDB + #C0DBCC + #ADBF97 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BCCDA6

Willow Green · Silver · Apple Green

HEX

#BCCDA6

RGB

rgb(188, 205, 166)

HSL

hsl(86, 28%, 73%)

HSB

hsb(86, 19%, 80%)

CMYK

cmyk(8%, 0%, 19%, 20%)

Oklch

oklch(82.5% 0.056 126.8)

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

#F4FCDE

Willow Green · Beige · Mint Green

HEX

#F4FCDE

RGB

rgb(244, 252, 222)

HSL

hsl(76, 83%, 93%)

HSB

hsb(76, 12%, 99%)

CMYK

cmyk(3%, 0%, 12%, 1%)

Oklch

oklch(97.7% 0.040 119.3)

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

#D7FDDB

Emerald · Beige · Mint Green

HEX

#D7FDDB

RGB

rgb(215, 253, 219)

HSL

hsl(126, 90%, 92%)

HSB

hsb(126, 15%, 99%)

CMYK

cmyk(15%, 0%, 13%, 1%)

Oklch

oklch(95.8% 0.060 148.0)

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

#C0DBCC

Celadon · LightGray · Mint Green

HEX

#C0DBCC

RGB

rgb(192, 219, 204)

HSL

hsl(147, 27%, 81%)

HSB

hsb(147, 12%, 86%)

CMYK

cmyk(12%, 0%, 7%, 14%)

Oklch

oklch(86.7% 0.035 161.3)

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

#ADBF97

Willow Green · DarkGray · Apple Green

HEX

#ADBF97

RGB

rgb(173, 191, 151)

HSL

hsl(87, 24%, 67%)

HSB

hsb(87, 21%, 75%)

CMYK

cmyk(9%, 0%, 21%, 25%)

Oklch

oklch(78.0% 0.058 127.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BCCDA6

B8A7CD

Analogous

CDCBA7

BCCDA6

A9CDA7

Triadic

BCCDA6

A7BDCD

CDA7BD

Split-Comp.

BCCDA6

A7A9CD

CBA7CD

Tetradic

BCCDA6

A7CDCB

B8A7CD

CDA7A9

Contrast Matrix WCAG 2.1 Contrast

BCCDA6	F4FCDE	D7FDDB	C0DBCC	ADBF97
—	1.6 Fail	1.5 Fail	1.1 Fail	1.2 Fail
1.6 Fail	—	1.0 Fail	1.4 Fail	1.9 Fail
1.5 Fail	1.0 Fail	—	1.3 Fail	1.8 Fail
1.1 Fail	1.4 Fail	1.3 Fail	—	1.3 Fail
1.2 Fail	1.9 Fail	1.8 Fail	1.3 Fail	—

White BG

1.7Fail

1.1Fail

1.5Fail

2.0Fail

Black BG

12.4AAA

19.8AAA

19.0AAA

14.2AAA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C4AF

F7F8E5

E7E8E3

CCCCD0

B5B5A1

Deuteranopia

C2C1B2

F7F6E7

E5E2E5

CAC8D1

B4B2A3

Tritanopia

BDB7B9

F4EBEC

D9EAEB

C1D2D3

AEA8AA

Achromatopsia

C3C3C3

F6F6F6

EEEEEE

D1D1D1

B5B5B5

Shades & Tints Shades & Tints

#BCCDA6

Dark

Light

#F4FCDE

Dark

Light

#D7FDDB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bccda6;
  --color-2: #f4fcde;
  --color-3: #d7fddb;
  --color-4: #c0dbcc;
  --color-5: #adbf97;
}

SCSS

$color-1: #bccda6;
$color-2: #f4fcde;
$color-3: #d7fddb;
$color-4: #c0dbcc;
$color-5: #adbf97;

TAILWIND

colors: {
  'brand-1': '#bccda6',
  'brand-2': '#f4fcde',
  'brand-3': '#d7fddb',
  'brand-4': '#c0dbcc',
  'brand-5': '#adbf97',
}

RGB Array

[188, 205, 166], [244, 252, 222], [215, 253, 219], [192, 219, 204], [173, 191, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BCCDA6, #F4FCDE, #D7FDDB, #C0DBCC, #ADBF97 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: #bccda6; --color-2: #f4fcde; --color-3: #d7fddb; --color-4: #c0dbcc; --color-5: #adbf97. 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