#374749 + #F44C2E + #D0A436 + #7FA656 + #3E9882 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#374749

Slate Blue · DarkSlateGray · Peacock Green

HEX

#374749

RGB

rgb(55, 71, 73)

HSL

hsl(187, 14%, 25%)

HSB

hsb(187, 25%, 29%)

CMYK

cmyk(25%, 3%, 0%, 71%)

Oklch

oklch(38.5% 0.021 205.7)

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

#F44C2E

Vermilion · Tomato · Passion Red

HEX

#F44C2E

RGB

rgb(244, 76, 46)

HSL

hsl(9, 90%, 57%)

HSB

hsb(9, 81%, 96%)

CMYK

cmyk(0%, 69%, 81%, 4%)

Oklch

oklch(65.1% 0.209 32.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#D0A436

Ginger · GoldenRod · Sunflower

HEX

#D0A436

RGB

rgb(208, 164, 54)

HSL

hsl(43, 62%, 51%)

HSB

hsb(43, 74%, 82%)

CMYK

cmyk(0%, 21%, 74%, 18%)

Oklch

oklch(74.0% 0.133 86.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#7FA656

Grass Green · Gray · Olive Green

HEX

#7FA656

RGB

rgb(127, 166, 86)

HSL

hsl(89, 32%, 49%)

HSB

hsb(89, 48%, 65%)

CMYK

cmyk(23%, 0%, 48%, 35%)

Oklch

oklch(67.8% 0.117 130.3)

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

#3E9882

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#3E9882

RGB

rgb(62, 152, 130)

HSL

hsl(165, 42%, 42%)

HSB

hsb(165, 59%, 60%)

CMYK

cmyk(59%, 0%, 14%, 40%)

Oklch

oklch(61.9% 0.092 174.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

374749

493937

Analogous

374942

374749

373E49

Triadic

374749

493747

474937

Split-Comp.

374749

49373E

494237

Tetradic

374749

423749

493937

3E4937

Contrast Matrix WCAG 2.1 Contrast

374749	F44C2E	D0A436	7FA656	3E9882
—	2.7 Fail	4.2 AA Large	3.5 AA Large	2.8 Fail
2.7 Fail	—	1.5 Fail	1.3 Fail	1.0 Fail
4.2 AA Large	1.5 Fail	—	1.2 Fail	1.5 Fail
3.5 AA Large	1.3 Fail	1.2 Fail	—	1.2 Fail
2.8 Fail	1.0 Fail	1.5 Fail	1.2 Fail	—

White BG

9.7AAA

3.5AA Large

2.3Fail

2.8Fail

3.5AA Large

Black BG

2.2Fail

5.9AA

9.0AAA

7.5AAA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E49

ABAA35

BDBD51

909069

656687

Deuteranopia

3D3C48

B5C237

C0C357

8E8B6E

605989

Tritanopia

384848

EC3B3C

CE666A

81797C

438C8C

Achromatopsia

424242

7B7B7B

A5A5A5

919191

7B7B7B

Shades & Tints Shades & Tints

#374749

Dark

Light

#F44C2E

Dark

Light

#D0A436

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #374749;
  --color-2: #f44c2e;
  --color-3: #d0a436;
  --color-4: #7fa656;
  --color-5: #3e9882;
}

SCSS

$color-1: #374749;
$color-2: #f44c2e;
$color-3: #d0a436;
$color-4: #7fa656;
$color-5: #3e9882;

TAILWIND

colors: {
  'brand-1': '#374749',
  'brand-2': '#f44c2e',
  'brand-3': '#d0a436',
  'brand-4': '#7fa656',
  'brand-5': '#3e9882',
}

RGB Array

[55, 71, 73], [244, 76, 46], [208, 164, 54], [127, 166, 86], [62, 152, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #374749, #F44C2E, #D0A436, #7FA656, #3E9882 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: #374749; --color-2: #f44c2e; --color-3: #d0a436; --color-4: #7fa656; --color-5: #3e9882. 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