#8DA65E + #3F6E52 + #363C5C + #3D2145 + #3B142B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8DA65E

Grass Green · Gray · Olive Green

HEX

#8DA65E

RGB

rgb(141, 166, 94)

HSL

hsl(81, 29%, 51%)

HSB

hsb(81, 43%, 65%)

CMYK

cmyk(15%, 0%, 43%, 35%)

Oklch

oklch(68.9% 0.102 124.7)

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

#3F6E52

Celadon · SeaGreen · Forest Green

HEX

#3F6E52

RGB

rgb(63, 110, 82)

HSL

hsl(144, 27%, 34%)

HSB

hsb(144, 43%, 43%)

CMYK

cmyk(43%, 0%, 25%, 57%)

Oklch

oklch(49.6% 0.069 156.6)

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

#363C5C

Indigo · DarkSlateGray · Prussian Blue

HEX

#363C5C

RGB

rgb(54, 60, 92)

HSL

hsl(231, 26%, 29%)

HSB

hsb(231, 41%, 36%)

CMYK

cmyk(41%, 35%, 0%, 64%)

Oklch

oklch(36.6% 0.056 275.2)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#3D2145

Dark Plum · DarkSlateGray · Dark Purple

HEX

#3D2145

RGB

rgb(61, 33, 69)

HSL

hsl(287, 35%, 20%)

HSB

hsb(287, 52%, 27%)

CMYK

cmyk(12%, 52%, 0%, 73%)

Oklch

oklch(30.1% 0.072 318.4)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#3B142B

Rose Purple · DarkSlateGray · Raspberry

HEX

#3B142B

RGB

rgb(59, 20, 43)

HSL

hsl(325, 49%, 15%)

HSB

hsb(325, 66%, 23%)

CMYK

cmyk(0%, 66%, 27%, 77%)

Oklch

oklch(26.1% 0.069 346.5)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8DA65E

775EA6

Analogous

A69B5E

8DA65E

69A65E

Triadic

8DA65E

5E8DA6

A65E8D

Split-Comp.

8DA65E

5E69A6

9B5EA6

Tetradic

8DA65E

5EA69B

775EA6

A65E69

Contrast Matrix WCAG 2.1 Contrast

8DA65E	3F6E52	363C5C	3D2145	3B142B
—	2.2 Fail	4.0 AA Large	5.2 AA	5.9 AA
2.2 Fail	—	1.8 Fail	2.4 Fail	2.7 Fail
4.0 AA Large	1.8 Fail	—	1.3 Fail	1.5 Fail
5.2 AA	2.4 Fail	1.3 Fail	—	1.1 Fail
5.9 AA	2.7 Fail	1.5 Fail	1.1 Fail	—

White BG

2.7Fail

5.9AA

10.7AAA

14.0AAA

15.9AAA

Black BG

7.7AAA

3.6AA Large

2.0Fail

1.5Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

98986F

535459

393954

31313C

2A2A25

Deuteranopia

969574

514D5A

383852

33353A

2C2F24

Tritanopia

8E7D80

415E5F

364E4D

3C3534

392120

Achromatopsia

969696

5D5D5D

3E3E3E

2D2D2D

222222

Shades & Tints Shades & Tints

#8DA65E

Dark

Light

#3F6E52

Dark

Light

#363C5C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8da65e;
  --color-2: #3f6e52;
  --color-3: #363c5c;
  --color-4: #3d2145;
  --color-5: #3b142b;
}

SCSS

$color-1: #8da65e;
$color-2: #3f6e52;
$color-3: #363c5c;
$color-4: #3d2145;
$color-5: #3b142b;

TAILWIND

colors: {
  'brand-1': '#8da65e',
  'brand-2': '#3f6e52',
  'brand-3': '#363c5c',
  'brand-4': '#3d2145',
  'brand-5': '#3b142b',
}

RGB Array

[141, 166, 94], [63, 110, 82], [54, 60, 92], [61, 33, 69], [59, 20, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8DA65E, #3F6E52, #363C5C, #3D2145, #3B142B 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: #8da65e; --color-2: #3f6e52; --color-3: #363c5c; --color-4: #3d2145; --color-5: #3b142b. 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