#343B3E + #2C494C + #1C6251 + #318758 + #8FA247 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#343B3E

Slate Blue · DarkSlateGray · Dark Stone

HEX

#343B3E

RGB

rgb(52, 59, 62)

HSL

hsl(198, 9%, 22%)

HSB

hsb(198, 16%, 24%)

CMYK

cmyk(16%, 5%, 0%, 76%)

Oklch

oklch(34.7% 0.011 225.4)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#2C494C

Slate Blue · DarkSlateGray · Peacock Green

HEX

#2C494C

RGB

rgb(44, 73, 76)

HSL

hsl(186, 27%, 24%)

HSB

hsb(186, 42%, 30%)

CMYK

cmyk(42%, 4%, 0%, 70%)

Oklch

oklch(38.4% 0.035 204.1)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#1C6251

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#1C6251

RGB

rgb(28, 98, 81)

HSL

hsl(165, 56%, 25%)

HSB

hsb(165, 71%, 38%)

CMYK

cmyk(71%, 0%, 17%, 62%)

Oklch

oklch(44.8% 0.074 173.3)

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

#318758

Celadon · SeaGreen · Forest Green

HEX

#318758

RGB

rgb(49, 135, 88)

HSL

hsl(147, 47%, 36%)

HSB

hsb(147, 64%, 53%)

CMYK

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

Oklch

oklch(55.9% 0.111 156.0)

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

#8FA247

Grass Green · Gray · Olive Green

HEX

#8FA247

RGB

rgb(143, 162, 71)

HSL

hsl(73, 39%, 46%)

HSB

hsb(73, 56%, 64%)

CMYK

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

Oklch

oklch(67.8% 0.119 119.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

343B3E

3D3633

Analogous

333D3B

343B3E

33353D

Triadic

343B3E

3D333A

3A3D33

Split-Comp.

343B3E

3D3335

3D3B33

Tetradic

343B3E

3B333D

3D3633

353D33

Contrast Matrix WCAG 2.1 Contrast

343B3E	2C494C	1C6251	318758	8FA247
—	1.2 Fail	1.6 Fail	2.6 Fail	4.0 AA Large
1.2 Fail	—	1.3 Fail	2.2 Fail	3.4 AA Large
1.6 Fail	1.3 Fail	—	1.6 Fail	2.5 Fail
2.6 Fail	2.2 Fail	1.6 Fail	—	1.6 Fail
4.0 AA Large	3.4 AA Large	2.5 Fail	1.6 Fail	—

White BG

11.4AAA

9.7AAA

7.2AAA

4.4AA Large

2.8Fail

Black BG

1.8Fail

2.2Fail

2.9Fail

4.7AA

7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

37373D

39394B

3A3B55

565763

97975D

Deuteranopia

37363D

37354B

363156

514B66

969562

Tritanopia

343D3D

2D4B4B

205859

356C6E

906E72

Achromatopsia

393939

414141

4B4B4B

686868

929292

Shades & Tints Shades & Tints

#343B3E

Dark

Light

#2C494C

Dark

Light

#1C6251

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #343b3e;
  --color-2: #2c494c;
  --color-3: #1c6251;
  --color-4: #318758;
  --color-5: #8fa247;
}

SCSS

$color-1: #343b3e;
$color-2: #2c494c;
$color-3: #1c6251;
$color-4: #318758;
$color-5: #8fa247;

TAILWIND

colors: {
  'brand-1': '#343b3e',
  'brand-2': '#2c494c',
  'brand-3': '#1c6251',
  'brand-4': '#318758',
  'brand-5': '#8fa247',
}

RGB Array

[52, 59, 62], [44, 73, 76], [28, 98, 81], [49, 135, 88], [143, 162, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #343B3E, #2C494C, #1C6251, #318758, #8FA247 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: #343b3e; --color-2: #2c494c; --color-3: #1c6251; --color-4: #318758; --color-5: #8fa247. 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