#334E20 + #426D5F + #547894 + #7E8FBD + #7EA4BD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#334E20

Celadon · DarkOliveGreen · Forest Green

HEX

#334E20

RGB

rgb(51, 78, 32)

HSL

hsl(95, 42%, 22%)

HSB

hsb(95, 59%, 31%)

CMYK

cmyk(35%, 0%, 59%, 69%)

Oklch

oklch(39.0% 0.078 134.0)

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

#426D5F

Mineral Blue · SeaGreen · Mint Ice

HEX

#426D5F

RGB

rgb(66, 109, 95)

HSL

hsl(160, 25%, 34%)

HSB

hsb(160, 39%, 43%)

CMYK

cmyk(39%, 0%, 13%, 57%)

Oklch

oklch(49.9% 0.053 171.4)

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

#547894

Slate Blue · SlateGray · Navy Blue

HEX

#547894

RGB

rgb(84, 120, 148)

HSL

hsl(206, 28%, 45%)

HSB

hsb(206, 43%, 58%)

CMYK

cmyk(43%, 19%, 0%, 42%)

Oklch

oklch(55.7% 0.060 242.5)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#7E8FBD

Azure · LightSlateGray · Cobalt Blue

HEX

#7E8FBD

RGB

rgb(126, 143, 189)

HSL

hsl(224, 32%, 62%)

HSB

hsb(224, 33%, 74%)

CMYK

cmyk(33%, 24%, 0%, 26%)

Oklch

oklch(65.4% 0.072 268.7)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#7EA4BD

Sky Blue · CadetBlue · Cobalt Blue

HEX

#7EA4BD

RGB

rgb(126, 164, 189)

HSL

hsl(204, 32%, 62%)

HSB

hsb(204, 33%, 74%)

CMYK

cmyk(33%, 13%, 0%, 26%)

Oklch

oklch(70.0% 0.055 237.4)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

334E20

3C2150

Analogous

4C5021

334E20

215024

Triadic

334E20

213450

502134

Split-Comp.

334E20

242150

50214C

Tetradic

334E20

214C50

3C2150

502421

Contrast Matrix WCAG 2.1 Contrast

334E20	426D5F	547894	7E8FBD	7EA4BD
—	1.6 Fail	2.0 Fail	2.9 Fail	3.5 AA Large
1.6 Fail	—	1.3 Fail	1.8 Fail	2.2 Fail
2.0 Fail	1.3 Fail	—	1.5 Fail	1.8 Fail
2.9 Fail	1.8 Fail	1.5 Fail	—	1.2 Fail
3.5 AA Large	2.2 Fail	1.8 Fail	1.2 Fail	—

White BG

9.3AAA

5.9AA

4.7AA

3.2AA Large

2.6Fail

Black BG

2.3Fail

3.6AA Large

4.5AA Large

6.6AA

7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F2B

555562

64648D

8586B2

8E8FB7

Deuteranopia

3D3B2E

524F63

625F8C

8483AF

8C89B5

Tritanopia

343436

446566

568887

7FA9A7

80B2B1

Achromatopsia

414141

5F5F5F

707070

8F8F8F

9B9B9B

Shades & Tints Shades & Tints

#334E20

Dark

Light

#426D5F

Dark

Light

#547894

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #334e20;
  --color-2: #426d5f;
  --color-3: #547894;
  --color-4: #7e8fbd;
  --color-5: #7ea4bd;
}

SCSS

$color-1: #334e20;
$color-2: #426d5f;
$color-3: #547894;
$color-4: #7e8fbd;
$color-5: #7ea4bd;

TAILWIND

colors: {
  'brand-1': '#334e20',
  'brand-2': '#426d5f',
  'brand-3': '#547894',
  'brand-4': '#7e8fbd',
  'brand-5': '#7ea4bd',
}

RGB Array

[51, 78, 32], [66, 109, 95], [84, 120, 148], [126, 143, 189], [126, 164, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #334E20, #426D5F, #547894, #7E8FBD, #7EA4BD 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: #334e20; --color-2: #426d5f; --color-3: #547894; --color-4: #7e8fbd; --color-5: #7ea4bd. 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