#B3D096 + #D5DFA1 + #F0F6C5 + #E0D879 + #B7A43A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B3D096

Celadon · DarkSeaGreen · Apple Green

HEX

#B3D096

RGB

rgb(179, 208, 150)

HSL

hsl(90, 38%, 70%)

HSB

hsb(90, 28%, 82%)

CMYK

cmyk(14%, 0%, 28%, 18%)

Oklch

oklch(82.2% 0.084 129.7)

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

#D5DFA1

Willow Green · Khaki · Apple Green

HEX

#D5DFA1

RGB

rgb(213, 223, 161)

HSL

hsl(70, 49%, 75%)

HSB

hsb(70, 28%, 87%)

CMYK

cmyk(4%, 0%, 28%, 13%)

Oklch

oklch(88.1% 0.082 115.6)

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

#F0F6C5

Fresh Green · Bisque · Lemon Cream

HEX

#F0F6C5

RGB

rgb(240, 246, 197)

HSL

hsl(67, 73%, 87%)

HSB

hsb(67, 20%, 96%)

CMYK

cmyk(2%, 0%, 20%, 4%)

Oklch

oklch(95.6% 0.064 113.3)

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

#E0D879

Fresh Green · Khaki · Sunflower

HEX

#E0D879

RGB

rgb(224, 216, 121)

HSL

hsl(55, 62%, 68%)

HSB

hsb(55, 46%, 88%)

CMYK

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

Oklch

oklch(86.9% 0.118 104.3)

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

#B7A43A

Autumn Sage · GoldenRod · Honey Gold

HEX

#B7A43A

RGB

rgb(183, 164, 58)

HSL

hsl(51, 52%, 47%)

HSB

hsb(51, 68%, 72%)

CMYK

cmyk(0%, 10%, 68%, 28%)

Oklch

oklch(71.6% 0.126 99.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3D096

B395D0

Analogous

D0D095

B3D096

95D095

Triadic

B3D096

95B3D0

D095B3

Split-Comp.

B3D096

9595D0

D095D0

Tetradic

B3D096

95D0D0

B395D0

D09595

Contrast Matrix WCAG 2.1 Contrast

B3D096	D5DFA1	F0F6C5	E0D879	B7A43A
—	1.2 Fail	1.5 Fail	1.2 Fail	1.5 Fail
1.2 Fail	—	1.3 Fail	1.0 Fail	1.8 Fail
1.5 Fail	1.3 Fail	—	1.3 Fail	2.2 Fail
1.2 Fail	1.0 Fail	1.3 Fail	—	1.7 Fail
1.5 Fail	1.8 Fail	2.2 Fail	1.7 Fail	—

White BG

1.7Fail

1.4Fail

1.1Fail

1.5Fail

2.5Fail

Black BG

12.4AAA

14.9AAA

18.7AAA

14.3AAA

8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C0A4

D9D9B0

F3F3D1

DDDC90

AFAF54

Deuteranopia

BEBCA7

D9D8B4

F2F2D4

DDDE96

B0B15A

Tritanopia

B4AFB2

D6BCBE

F0DADC

E0A2A6

B6686C

Achromatopsia

C1C1C1

D5D5D5

EFEFEF

D0D0D0

9E9E9E

Shades & Tints Shades & Tints

#B3D096

Dark

Light

#D5DFA1

Dark

Light

#F0F6C5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3d096;
  --color-2: #d5dfa1;
  --color-3: #f0f6c5;
  --color-4: #e0d879;
  --color-5: #b7a43a;
}

SCSS

$color-1: #b3d096;
$color-2: #d5dfa1;
$color-3: #f0f6c5;
$color-4: #e0d879;
$color-5: #b7a43a;

TAILWIND

colors: {
  'brand-1': '#b3d096',
  'brand-2': '#d5dfa1',
  'brand-3': '#f0f6c5',
  'brand-4': '#e0d879',
  'brand-5': '#b7a43a',
}

RGB Array

[179, 208, 150], [213, 223, 161], [240, 246, 197], [224, 216, 121], [183, 164, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3D096, #D5DFA1, #F0F6C5, #E0D879, #B7A43A 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: #b3d096; --color-2: #d5dfa1; --color-3: #f0f6c5; --color-4: #e0d879; --color-5: #b7a43a. 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