#B4D5B9 + #C4C083 + #DBEAC5 + #8FA396 + #E9E9C7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B4D5B9

Celadon · Silver · Apple Green

HEX

#B4D5B9

RGB

rgb(180, 213, 185)

HSL

hsl(129, 28%, 77%)

HSB

hsb(129, 15%, 84%)

CMYK

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

Oklch

oklch(84.1% 0.052 149.5)

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

#C4C083

Fresh Green · Tan · Sunflower

HEX

#C4C083

RGB

rgb(196, 192, 131)

HSL

hsl(56, 36%, 64%)

HSB

hsb(56, 33%, 77%)

CMYK

cmyk(0%, 2%, 33%, 23%)

Oklch

oklch(79.7% 0.080 104.9)

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

#DBEAC5

Willow Green · LightGray · Mint Green

HEX

#DBEAC5

RGB

rgb(219, 234, 197)

HSL

hsl(84, 47%, 85%)

HSB

hsb(84, 16%, 92%)

CMYK

cmyk(6%, 0%, 16%, 8%)

Oklch

oklch(91.6% 0.052 125.4)

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

#8FA396

Celadon · DarkSeaGreen · Olive Green

HEX

#8FA396

RGB

rgb(143, 163, 150)

HSL

hsl(141, 10%, 60%)

HSB

hsb(141, 12%, 64%)

CMYK

cmyk(12%, 0%, 8%, 36%)

Oklch

oklch(69.6% 0.029 157.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#E9E9C7

Fresh Green · Bisque · Lemon Cream

HEX

#E9E9C7

RGB

rgb(233, 233, 199)

HSL

hsl(60, 44%, 85%)

HSB

hsb(60, 15%, 91%)

CMYK

cmyk(0%, 0%, 15%, 9%)

Oklch

oklch(92.5% 0.045 107.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4D5B9

D5B4D0

Analogous

BFD5B4

B4D5B9

B4D5C9

Triadic

B4D5B9

B9B4D5

D5B9B4

Split-Comp.

B4D5B9

C9B4D5

D5B4BF

Tetradic

B4D5B9

B4BFD5

D5B4D0

D5C9B4

Contrast Matrix WCAG 2.1 Contrast

B4D5B9	C4C083	DBEAC5	8FA396	E9E9C7
—	1.2 Fail	1.3 Fail	1.7 Fail	1.3 Fail
1.2 Fail	—	1.5 Fail	1.4 Fail	1.5 Fail
1.3 Fail	1.5 Fail	—	2.1 Fail	1.0 Fail
1.7 Fail	1.4 Fail	2.1 Fail	—	2.2 Fail
1.3 Fail	1.5 Fail	1.0 Fail	2.2 Fail	—

White BG

1.6Fail

1.9Fail

1.3Fail

2.7Fail

1.2Fail

Black BG

13.2AAA

11.2AAA

16.6AAA

7.8AAA

16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C3C0

C2C292

E1E2CE

989899

E9E9CF

Deuteranopia

C0BEC1

C3C395

E1E0D0

97959A

E9E9D1

Tritanopia

B6C5C6

C49DA0

DCD5D7

909C9C

E9D6D7

Achromatopsia

C8C8C8

BABABA

E1E1E1

9C9C9C

E5E5E5

Shades & Tints Shades & Tints

#B4D5B9

Dark

Light

#C4C083

Dark

Light

#DBEAC5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4d5b9;
  --color-2: #c4c083;
  --color-3: #dbeac5;
  --color-4: #8fa396;
  --color-5: #e9e9c7;
}

SCSS

$color-1: #b4d5b9;
$color-2: #c4c083;
$color-3: #dbeac5;
$color-4: #8fa396;
$color-5: #e9e9c7;

TAILWIND

colors: {
  'brand-1': '#b4d5b9',
  'brand-2': '#c4c083',
  'brand-3': '#dbeac5',
  'brand-4': '#8fa396',
  'brand-5': '#e9e9c7',
}

RGB Array

[180, 213, 185], [196, 192, 131], [219, 234, 197], [143, 163, 150], [233, 233, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4D5B9, #C4C083, #DBEAC5, #8FA396, #E9E9C7 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: #b4d5b9; --color-2: #c4c083; --color-3: #dbeac5; --color-4: #8fa396; --color-5: #e9e9c7. 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