#9BBA6C + #B4DA7E + #8AD67C + #62BF89 + #3CA390 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9BBA6C

Grass Green · DarkSeaGreen · Olive Green

HEX

#9BBA6C

RGB

rgb(155, 186, 108)

HSL

hsl(84, 36%, 58%)

HSB

hsb(84, 42%, 73%)

CMYK

cmyk(17%, 0%, 42%, 27%)

Oklch

oklch(74.7% 0.110 126.6)

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

#B4DA7E

Willow Green · LightGreen · Apple Green

HEX

#B4DA7E

RGB

rgb(180, 218, 126)

HSL

hsl(85, 55%, 67%)

HSB

hsb(85, 42%, 85%)

CMYK

cmyk(17%, 0%, 42%, 15%)

Oklch

oklch(84.0% 0.126 127.2)

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

#8AD67C

Emerald · LightGreen · Apple Green

HEX

#8AD67C

RGB

rgb(138, 214, 124)

HSL

hsl(111, 52%, 66%)

HSB

hsb(111, 42%, 84%)

CMYK

cmyk(36%, 0%, 42%, 16%)

Oklch

oklch(80.5% 0.144 140.6)

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

#62BF89

Celadon · MediumAquaMarine · Olive Green

HEX

#62BF89

RGB

rgb(98, 191, 137)

HSL

hsl(145, 42%, 57%)

HSB

hsb(145, 49%, 75%)

CMYK

cmyk(49%, 0%, 28%, 25%)

Oklch

oklch(73.3% 0.120 156.3)

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

#3CA390

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#3CA390

RGB

rgb(60, 163, 144)

HSL

hsl(169, 46%, 44%)

HSB

hsb(169, 63%, 64%)

CMYK

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

Oklch

oklch(65.1% 0.099 178.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BBA6C

8C6DBA

Analogous

BAB36D

9BBA6C

75BA6D

Triadic

9BBA6C

6D9CBA

BA6D9C

Split-Comp.

9BBA6C

6D75BA

B36DBA

Tetradic

9BBA6C

6DBAB3

8C6DBA

BA6D75

Contrast Matrix WCAG 2.1 Contrast

9BBA6C	B4DA7E	8AD67C	62BF89	3CA390
—	1.4 Fail	1.2 Fail	1.0 Fail	1.4 Fail
1.4 Fail	—	1.1 Fail	1.4 Fail	1.9 Fail
1.2 Fail	1.1 Fail	—	1.3 Fail	1.8 Fail
1.0 Fail	1.4 Fail	1.3 Fail	—	1.4 Fail
1.4 Fail	1.9 Fail	1.8 Fail	1.4 Fail	—

White BG

2.2Fail

1.6Fail

1.8Fail

2.3Fail

3.1AA Large

Black BG

9.6AAA

13.3AAA

12.0AAA

9.3AAA

6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A97F

C4C594

ABAC92

8A8B96

696A95

Deuteranopia

A7A483

C2BF9A

A7A197

857E99

635B96

Tritanopia

9D8E91

B6A6AA

8EA3A7

67A0A3

419899

Achromatopsia

A8A8A8

C4C4C4

B5B5B5

9D9D9D

828282

Shades & Tints Shades & Tints

#9BBA6C

Dark

Light

#B4DA7E

Dark

Light

#8AD67C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bba6c;
  --color-2: #b4da7e;
  --color-3: #8ad67c;
  --color-4: #62bf89;
  --color-5: #3ca390;
}

SCSS

$color-1: #9bba6c;
$color-2: #b4da7e;
$color-3: #8ad67c;
$color-4: #62bf89;
$color-5: #3ca390;

TAILWIND

colors: {
  'brand-1': '#9bba6c',
  'brand-2': '#b4da7e',
  'brand-3': '#8ad67c',
  'brand-4': '#62bf89',
  'brand-5': '#3ca390',
}

RGB Array

[155, 186, 108], [180, 218, 126], [138, 214, 124], [98, 191, 137], [60, 163, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BBA6C, #B4DA7E, #8AD67C, #62BF89, #3CA390 is ideal for: corporate websites, product showcases, portfolios. 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: #9bba6c; --color-2: #b4da7e; --color-3: #8ad67c; --color-4: #62bf89; --color-5: #3ca390. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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