#8CA841 + #57965D + #3D7C5F + #2C5D61 + #1F282F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8CA841

Grass Green · Gray · Olive Green

HEX

#8CA841

RGB

rgb(140, 168, 65)

HSL

hsl(76, 44%, 46%)

HSB

hsb(76, 61%, 66%)

CMYK

cmyk(17%, 0%, 61%, 34%)

Oklch

oklch(68.9% 0.134 122.8)

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

#57965D

Celadon · SeaGreen · Olive Green

HEX

#57965D

RGB

rgb(87, 150, 93)

HSL

hsl(126, 27%, 46%)

HSB

hsb(126, 42%, 59%)

CMYK

cmyk(42%, 0%, 38%, 41%)

Oklch

oklch(61.5% 0.107 146.3)

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

#3D7C5F

Mineral Blue · SeaGreen · Forest Green

HEX

#3D7C5F

RGB

rgb(61, 124, 95)

HSL

hsl(152, 34%, 36%)

HSB

hsb(152, 51%, 49%)

CMYK

cmyk(51%, 0%, 23%, 51%)

Oklch

oklch(53.6% 0.080 162.0)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#2C5D61

Slate Blue · DarkSlateGray · Mint Ice

HEX

#2C5D61

RGB

rgb(44, 93, 97)

HSL

hsl(185, 38%, 28%)

HSB

hsb(185, 55%, 38%)

CMYK

cmyk(55%, 4%, 0%, 62%)

Oklch

oklch(44.6% 0.053 202.5)

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

#1F282F

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX

#1F282F

RGB

rgb(31, 40, 47)

HSL

hsl(206, 21%, 15%)

HSB

hsb(206, 34%, 18%)

CMYK

cmyk(34%, 15%, 0%, 82%)

Oklch

oklch(27.1% 0.018 241.7)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8CA841

5D42A9

Analogous

A99142

8CA841

5AA942

Triadic

8CA841

428DA9

A9428D

Split-Comp.

8CA841

425AA9

9142A9

Tetradic

8CA841

42A991

5D42A9

A9425A

Contrast Matrix WCAG 2.1 Contrast

8CA841	57965D	3D7C5F	2C5D61	1F282F
—	1.3 Fail	1.8 Fail	2.7 Fail	5.6 AA
1.3 Fail	—	1.4 Fail	2.1 Fail	4.2 AA Large
1.8 Fail	1.4 Fail	—	1.5 Fail	3.0 AA Large
2.7 Fail	2.1 Fail	1.5 Fail	—	2.0 Fail
5.6 AA	4.2 AA Large	3.0 AA Large	2.0 Fail	—

White BG

2.7Fail

3.5AA Large

4.9AA

7.4AAA

15.0AAA

Black BG

7.8AAA

5.9AA

4.2AA Large

2.8Fail

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

98985A

72736B

585966

414260

23232D

Deuteranopia

979460

6F6A6E

555068

3E3B60

22222D

Tritanopia

8D6E72

5A7678

406C6D

2E5F5F

1F2C2C

Achromatopsia

949494

7D7D7D

666666

4F4F4F

262626

Shades & Tints Shades & Tints

#8CA841

Dark

Light

#57965D

Dark

Light

#3D7C5F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ca841;
  --color-2: #57965d;
  --color-3: #3d7c5f;
  --color-4: #2c5d61;
  --color-5: #1f282f;
}

SCSS

$color-1: #8ca841;
$color-2: #57965d;
$color-3: #3d7c5f;
$color-4: #2c5d61;
$color-5: #1f282f;

TAILWIND

colors: {
  'brand-1': '#8ca841',
  'brand-2': '#57965d',
  'brand-3': '#3d7c5f',
  'brand-4': '#2c5d61',
  'brand-5': '#1f282f',
}

RGB Array

[140, 168, 65], [87, 150, 93], [61, 124, 95], [44, 93, 97], [31, 40, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8CA841, #57965D, #3D7C5F, #2C5D61, #1F282F is ideal for: tech websites, dark mode UIs, game UIs. 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: #8ca841; --color-2: #57965d; --color-3: #3d7c5f; --color-4: #2c5d61; --color-5: #1f282f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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