#D6F4A2 + #D3C7CD + #F2F3CE + #B6C9BB + #A0A896 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D6F4A2

Willow Green · Khaki · Apple Green

HEX

#D6F4A2

RGB

rgb(214, 244, 162)

HSL

hsl(82, 79%, 80%)

HSB

hsb(82, 34%, 96%)

CMYK

cmyk(12%, 0%, 34%, 4%)

Oklch

oklch(92.6% 0.110 124.8)

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

#D3C7CD

Rouge · LightGray · Cherry Blossom

HEX

#D3C7CD

RGB

rgb(211, 199, 205)

HSL

hsl(330, 12%, 80%)

HSB

hsb(330, 6%, 83%)

CMYK

cmyk(0%, 6%, 3%, 17%)

Oklch

oklch(84.1% 0.016 345.6)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F2F3CE

Fresh Green · Beige · Lemon Cream

HEX

#F2F3CE

RGB

rgb(242, 243, 206)

HSL

hsl(62, 61%, 88%)

HSB

hsb(62, 15%, 95%)

CMYK

cmyk(0%, 0%, 15%, 5%)

Oklch

oklch(95.4% 0.048 108.6)

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

#B6C9BB

Celadon · Silver · Apple Green

HEX

#B6C9BB

RGB

rgb(182, 201, 187)

HSL

hsl(136, 15%, 75%)

HSB

hsb(136, 9%, 79%)

CMYK

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

Oklch

oklch(81.7% 0.028 153.8)

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

#A0A896

Willow Green · DarkGray · Silver Sand

HEX

#A0A896

RGB

rgb(160, 168, 150)

HSL

hsl(87, 9%, 62%)

HSB

hsb(87, 11%, 66%)

CMYK

cmyk(5%, 0%, 11%, 34%)

Oklch

oklch(72.0% 0.027 126.7)

Traditional「Willow Green」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D6F4A2

C1A4F4

Analogous

F4EAA4

D6F4A2

AEF4A4

Triadic

D6F4A2

A4D7F4

F4A4D7

Split-Comp.

D6F4A2

A4AEF4

EAA4F4

Tetradic

D6F4A2

A4F4EA

C1A4F4

F4A4AE

Contrast Matrix WCAG 2.1 Contrast

D6F4A2	D3C7CD	F2F3CE	B6C9BB	A0A896
—	1.4 Fail	1.1 Fail	1.4 Fail	2.0 Fail
1.4 Fail	—	1.4 Fail	1.1 Fail	1.5 Fail
1.1 Fail	1.4 Fail	—	1.5 Fail	2.2 Fail
1.4 Fail	1.1 Fail	1.5 Fail	—	1.4 Fail
2.0 Fail	1.5 Fail	2.2 Fail	1.4 Fail	—

White BG

1.2Fail

1.6Fail

1.1Fail

1.7Fail

2.5Fail

Black BG

17.3AAA

12.8AAA

18.5AAA

12.1AAA

8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3B6

CECECC

F2F2D7

BEBEBE

A3A49A

Deuteranopia

E1DFBB

CFCFCB

F2F2D9

BDBCBF

A3A29B

Tritanopia

D7C6C9

D2CACA

F2DEE0

B7C1C2

A09E9F

Achromatopsia

E2E2E2

CBCBCB

EEEEEE

C2C2C2

A4A4A4

Shades & Tints Shades & Tints

#D6F4A2

Dark

Light

#D3C7CD

Dark

Light

#F2F3CE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d6f4a2;
  --color-2: #d3c7cd;
  --color-3: #f2f3ce;
  --color-4: #b6c9bb;
  --color-5: #a0a896;
}

SCSS

$color-1: #d6f4a2;
$color-2: #d3c7cd;
$color-3: #f2f3ce;
$color-4: #b6c9bb;
$color-5: #a0a896;

TAILWIND

colors: {
  'brand-1': '#d6f4a2',
  'brand-2': '#d3c7cd',
  'brand-3': '#f2f3ce',
  'brand-4': '#b6c9bb',
  'brand-5': '#a0a896',
}

RGB Array

[214, 244, 162], [211, 199, 205], [242, 243, 206], [182, 201, 187], [160, 168, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D6F4A2, #D3C7CD, #F2F3CE, #B6C9BB, #A0A896 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: #d6f4a2; --color-2: #d3c7cd; --color-3: #f2f3ce; --color-4: #b6c9bb; --color-5: #a0a896. 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