#3F9B2E + #64BB52 + #D9E68E + #9FD13E + #C6DF3B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3F9B2E

Pine Green · ForestGreen · Forest Green

HEX

#3F9B2E

RGB

rgb(63, 155, 46)

HSL

hsl(111, 54%, 39%)

HSB

hsb(111, 70%, 61%)

CMYK

cmyk(59%, 0%, 70%, 39%)

Oklch

oklch(61.1% 0.170 140.8)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#64BB52

Celadon · MediumSeaGreen · Olive Green

HEX

#64BB52

RGB

rgb(100, 187, 82)

HSL

hsl(110, 44%, 53%)

HSB

hsb(110, 56%, 73%)

CMYK

cmyk(47%, 0%, 56%, 27%)

Oklch

oklch(71.4% 0.165 140.3)

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

#D9E68E

Fresh Green · Khaki · Sunflower

HEX

#D9E68E

RGB

rgb(217, 230, 142)

HSL

hsl(69, 64%, 73%)

HSB

hsb(69, 38%, 90%)

CMYK

cmyk(6%, 0%, 38%, 10%)

Oklch

oklch(89.5% 0.112 115.6)

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

#9FD13E

Grass Green · GreenYellow · Olive Green

HEX

#9FD13E

RGB

rgb(159, 209, 62)

HSL

hsl(80, 62%, 53%)

HSB

hsb(80, 70%, 82%)

CMYK

cmyk(24%, 0%, 70%, 18%)

Oklch

oklch(79.8% 0.179 126.6)

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

#C6DF3B

Autumn Sage · GreenYellow · Sunflower

HEX

#C6DF3B

RGB

rgb(198, 223, 59)

HSL

hsl(69, 72%, 55%)

HSB

hsb(69, 74%, 87%)

CMYK

cmyk(11%, 0%, 74%, 13%)

Oklch

oklch(85.7% 0.181 118.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3F9B2E

892E99

Analogous

74992E

3F9B2E

2E9953

Triadic

3F9B2E

2E3E99

992E3E

Split-Comp.

3F9B2E

532E99

992E74

Tetradic

3F9B2E

2E7499

892E99

99532E

Contrast Matrix WCAG 2.1 Contrast

3F9B2E	64BB52	D9E68E	9FD13E	C6DF3B
—	1.5 Fail	2.6 Fail	2.0 Fail	2.4 Fail
1.5 Fail	—	1.8 Fail	1.3 Fail	1.6 Fail
2.6 Fail	1.8 Fail	—	1.3 Fail	1.1 Fail
2.0 Fail	1.3 Fail	1.3 Fail	—	1.2 Fail
2.4 Fail	1.6 Fail	1.1 Fail	1.2 Fail	—

White BG

3.5AA Large

2.4Fail

1.3Fail

1.8Fail

1.5Fail

Black BG

5.9AA

8.8AAA

15.7AAA

11.7AAA

14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

676848

8A8A6B

DFDFA3

B5B562

D1D163

Deuteranopia

625B4F

857E72

DEDDA8

B2AE6A

CFCE6C

Tritanopia

445D62

687F84

DAB4B8

A17E84

C78289

Achromatopsia

737373

959595

D8D8D8

B1B1B1

C5C5C5

Shades & Tints Shades & Tints

#3F9B2E

Dark

Light

#64BB52

Dark

Light

#D9E68E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3f9b2e;
  --color-2: #64bb52;
  --color-3: #d9e68e;
  --color-4: #9fd13e;
  --color-5: #c6df3b;
}

SCSS

$color-1: #3f9b2e;
$color-2: #64bb52;
$color-3: #d9e68e;
$color-4: #9fd13e;
$color-5: #c6df3b;

TAILWIND

colors: {
  'brand-1': '#3f9b2e',
  'brand-2': '#64bb52',
  'brand-3': '#d9e68e',
  'brand-4': '#9fd13e',
  'brand-5': '#c6df3b',
}

RGB Array

[63, 155, 46], [100, 187, 82], [217, 230, 142], [159, 209, 62], [198, 223, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3F9B2E, #64BB52, #D9E68E, #9FD13E, #C6DF3B 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: #3f9b2e; --color-2: #64bb52; --color-3: #d9e68e; --color-4: #9fd13e; --color-5: #c6df3b. 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