#BCD3C1 + #D2E4CC + #FDFDE3 + #DFDEC9 + #C3C5AF · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BCD3C1

Celadon · Silver · Apple Green

HEX

#BCD3C1

RGB

rgb(188, 211, 193)

HSL

hsl(133, 21%, 78%)

HSB

hsb(133, 11%, 83%)

CMYK

cmyk(11%, 0%, 9%, 17%)

Oklch

oklch(84.5% 0.035 152.0)

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

#D2E4CC

Celadon · LightGray · Mint Green

HEX

#D2E4CC

RGB

rgb(210, 228, 204)

HSL

hsl(105, 31%, 85%)

HSB

hsb(105, 11%, 89%)

CMYK

cmyk(8%, 0%, 11%, 11%)

Oklch

oklch(89.9% 0.038 137.8)

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

#FDFDE3

Fresh Green · LightYellow · Lemon Cream

HEX

#FDFDE3

RGB

rgb(253, 253, 227)

HSL

hsl(60, 87%, 94%)

HSB

hsb(60, 10%, 99%)

CMYK

cmyk(0%, 0%, 10%, 1%)

Oklch

oklch(98.7% 0.034 107.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#DFDEC9

Fresh Green · LightGray · Lemon Cream

HEX

#DFDEC9

RGB

rgb(223, 222, 201)

HSL

hsl(57, 26%, 83%)

HSB

hsb(57, 10%, 87%)

CMYK

cmyk(0%, 0%, 10%, 13%)

Oklch

oklch(89.6% 0.028 104.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#C3C5AF

Fresh Green · Silver · Sunflower

HEX

#C3C5AF

RGB

rgb(195, 197, 175)

HSL

hsl(65, 16%, 73%)

HSB

hsb(65, 11%, 77%)

CMYK

cmyk(1%, 0%, 11%, 23%)

Oklch

oklch(81.6% 0.030 111.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BCD3C1

D3BBCE

Analogous

C2D3BB

BCD3C1

BBD3CC

Triadic

BCD3C1

C0BBD3

D3C0BB

Split-Comp.

BCD3C1

CCBBD3

D3BBC2

Tetradic

BCD3C1

BBC2D3

D3BBCE

D3CCBB

Contrast Matrix WCAG 2.1 Contrast

BCD3C1	D2E4CC	FDFDE3	DFDEC9	C3C5AF
—	1.2 Fail	1.5 Fail	1.2 Fail	1.1 Fail
1.2 Fail	—	1.3 Fail	1.0 Fail	1.3 Fail
1.5 Fail	1.3 Fail	—	1.3 Fail	1.7 Fail
1.2 Fail	1.0 Fail	1.3 Fail	—	1.3 Fail
1.1 Fail	1.3 Fail	1.7 Fail	1.3 Fail	—

White BG

1.6Fail

1.3Fail

1.0Fail

1.4Fail

1.8Fail

Black BG

13.2AAA

15.7AAA

20.3AAA

15.4AAA

11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C6C5

DADAD2

FDFDE9

DFDFCE

C4C4B4

Deuteranopia

C5C3C6

D9D7D3

FDFDEB

DFDFCF

C4C4B6

Tritanopia

BDC9CA

D3D6D7

FDEEEF

DFD2D3

C3B9B9

Achromatopsia

CACACA

DCDCDC

FAFAFA

DCDCDC

C2C2C2

Shades & Tints Shades & Tints

#BCD3C1

Dark

Light

#D2E4CC

Dark

Light

#FDFDE3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bcd3c1;
  --color-2: #d2e4cc;
  --color-3: #fdfde3;
  --color-4: #dfdec9;
  --color-5: #c3c5af;
}

SCSS

$color-1: #bcd3c1;
$color-2: #d2e4cc;
$color-3: #fdfde3;
$color-4: #dfdec9;
$color-5: #c3c5af;

TAILWIND

colors: {
  'brand-1': '#bcd3c1',
  'brand-2': '#d2e4cc',
  'brand-3': '#fdfde3',
  'brand-4': '#dfdec9',
  'brand-5': '#c3c5af',
}

RGB Array

[188, 211, 193], [210, 228, 204], [253, 253, 227], [223, 222, 201], [195, 197, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #BCD3C1, #D2E4CC, #FDFDE3, #DFDEC9, #C3C5AF 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: #bcd3c1; --color-2: #d2e4cc; --color-3: #fdfde3; --color-4: #dfdec9; --color-5: #c3c5af. 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 cool-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