#8F9D6F + #BCEB12 + #E4E6D4 + #CFD1C0 + #B4BCA5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8F9D6F

Grass Green · Gray · Olive Green

HEX

#8F9D6F

RGB

rgb(143, 157, 111)

HSL

hsl(78, 19%, 53%)

HSB

hsb(78, 29%, 62%)

CMYK

cmyk(9%, 0%, 29%, 38%)

Oklch

oklch(67.3% 0.067 121.9)

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

#BCEB12

Grass Green · GreenYellow · Olive Green

HEX

#BCEB12

RGB

rgb(188, 235, 18)

HSL

hsl(73, 86%, 50%)

HSB

hsb(73, 92%, 92%)

CMYK

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

Oklch

oklch(87.5% 0.212 123.2)

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

#E4E6D4

Fresh Green · Beige · Lemon Cream

HEX

#E4E6D4

RGB

rgb(228, 230, 212)

HSL

hsl(67, 26%, 87%)

HSB

hsb(67, 8%, 90%)

CMYK

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

Oklch

oklch(91.9% 0.024 112.0)

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

#CFD1C0

Fresh Green · LightGray · Lemon Cream

HEX

#CFD1C0

RGB

rgb(207, 209, 192)

HSL

hsl(67, 16%, 79%)

HSB

hsb(67, 8%, 82%)

CMYK

cmyk(1%, 0%, 8%, 18%)

Oklch

oklch(85.4% 0.023 112.3)

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

#B4BCA5

Willow Green · DarkGray · Apple Green

HEX

#B4BCA5

RGB

rgb(180, 188, 165)

HSL

hsl(81, 15%, 69%)

HSB

hsb(81, 12%, 74%)

CMYK

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

Oklch

oklch(78.3% 0.033 122.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F9D6F

7E709E

Analogous

9E9570

8F9D6F

799E70

Triadic

8F9D6F

70909E

9E7090

Split-Comp.

8F9D6F

70799E

95709E

Tetradic

8F9D6F

709E95

7E709E

9E7079

Contrast Matrix WCAG 2.1 Contrast

8F9D6F	BCEB12	E4E6D4	CFD1C0	B4BCA5
—	2.1 Fail	2.3 Fail	1.9 Fail	1.5 Fail
2.1 Fail	—	1.1 Fail	1.1 Fail	1.4 Fail
2.3 Fail	1.1 Fail	—	1.2 Fail	1.6 Fail
1.9 Fail	1.1 Fail	1.2 Fail	—	1.3 Fail
1.5 Fail	1.4 Fail	1.6 Fail	1.3 Fail	—

White BG

2.9Fail

1.4Fail

1.3Fail

1.6Fail

2.0Fail

Black BG

7.2AAA

15.0AAA

16.6AAA

13.5AAA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

95957A

D0D147

E5E5D8

D0D0C4

B7B8AB

Deuteranopia

94937D

CECA53

E5E5D9

D0D0C5

B7B6AC

Tritanopia

908385

BE7079

E4DCDD

CFC7C8

B4AFB0

Achromatopsia

949494

C4C4C4

E3E3E3

CECECE

B7B7B7

Shades & Tints Shades & Tints

#8F9D6F

Dark

Light

#BCEB12

Dark

Light

#E4E6D4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f9d6f;
  --color-2: #bceb12;
  --color-3: #e4e6d4;
  --color-4: #cfd1c0;
  --color-5: #b4bca5;
}

SCSS

$color-1: #8f9d6f;
$color-2: #bceb12;
$color-3: #e4e6d4;
$color-4: #cfd1c0;
$color-5: #b4bca5;

TAILWIND

colors: {
  'brand-1': '#8f9d6f',
  'brand-2': '#bceb12',
  'brand-3': '#e4e6d4',
  'brand-4': '#cfd1c0',
  'brand-5': '#b4bca5',
}

RGB Array

[143, 157, 111], [188, 235, 18], [228, 230, 212], [207, 209, 192], [180, 188, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8F9D6F, #BCEB12, #E4E6D4, #CFD1C0, #B4BCA5 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: #8f9d6f; --color-2: #bceb12; --color-3: #e4e6d4; --color-4: #cfd1c0; --color-5: #b4bca5. 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