#3AA58E + #497C6E + #4E5E56 + #5C3E3F + #611019 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3AA58E

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#3AA58E

RGB

rgb(58, 165, 142)

HSL

hsl(167, 48%, 44%)

HSB

hsb(167, 65%, 65%)

CMYK

cmyk(65%, 0%, 14%, 35%)

Oklch

oklch(65.5% 0.103 175.9)

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

#497C6E

Mineral Blue · DimGray · Mint Ice

HEX

#497C6E

RGB

rgb(73, 124, 110)

HSL

hsl(164, 26%, 39%)

HSB

hsb(164, 41%, 49%)

CMYK

cmyk(41%, 0%, 11%, 51%)

Oklch

oklch(54.6% 0.060 174.5)

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

#4E5E56

Mineral Blue · DimGray · Charcoal

HEX

#4E5E56

RGB

rgb(78, 94, 86)

HSL

hsl(150, 9%, 34%)

HSB

hsb(150, 17%, 37%)

CMYK

cmyk(17%, 0%, 9%, 63%)

Oklch

oklch(46.6% 0.024 163.7)

Traditional「Mineral Blue」· Paint「Charcoal」· Creative Midnight Shadow

#5C3E3F

Crimson · DarkOliveGreen · Wine Red

HEX

#5C3E3F

RGB

rgb(92, 62, 63)

HSL

hsl(358, 19%, 30%)

HSB

hsb(358, 33%, 36%)

CMYK

cmyk(0%, 33%, 32%, 64%)

Oklch

oklch(39.8% 0.042 16.9)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#611019

Vermilion · Maroon · Wine Red

HEX

#611019

RGB

rgb(97, 16, 25)

HSL

hsl(353, 72%, 22%)

HSB

hsb(353, 84%, 38%)

CMYK

cmyk(0%, 84%, 74%, 62%)

Oklch

oklch(32.4% 0.113 20.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3AA58E

A63A52

Analogous

3AA659

3AA58E

3A88A6

Triadic

3AA58E

8F3AA6

A68F3A

Split-Comp.

3AA58E

A63A88

A6593A

Tetradic

3AA58E

593AA6

A63A52

88A63A

Contrast Matrix WCAG 2.1 Contrast

3AA58E	497C6E	4E5E56	5C3E3F	611019
—	1.6 Fail	2.3 Fail	3.1 AA Large	4.4 AA Large
1.6 Fail	—	1.4 Fail	2.0 Fail	2.8 Fail
2.3 Fail	1.4 Fail	—	1.4 Fail	1.9 Fail
3.1 AA Large	2.0 Fail	1.4 Fail	—	1.4 Fail
4.4 AA Large	2.8 Fail	1.9 Fail	1.4 Fail	—

White BG

3.0AA Large

4.8AA

6.9AA

9.5AAA

13.2AAA

Black BG

7.0AA

4.4AA Large

3.1AA Large

2.2Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

686994

5F6071

555558

4F4F3F

3E3D17

Deuteranopia

625A95

5C5872

545358

51533F

434916

Tritanopia

3F9899

4C7475

4F595A

5A3F3F

5D1515

Achromatopsia

828282

6B6B6B

585858

474747

292929

Shades & Tints Shades & Tints

#3AA58E

Dark

Light

#497C6E

Dark

Light

#4E5E56

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3aa58e;
  --color-2: #497c6e;
  --color-3: #4e5e56;
  --color-4: #5c3e3f;
  --color-5: #611019;
}

SCSS

$color-1: #3aa58e;
$color-2: #497c6e;
$color-3: #4e5e56;
$color-4: #5c3e3f;
$color-5: #611019;

TAILWIND

colors: {
  'brand-1': '#3aa58e',
  'brand-2': '#497c6e',
  'brand-3': '#4e5e56',
  'brand-4': '#5c3e3f',
  'brand-5': '#611019',
}

RGB Array

[58, 165, 142], [73, 124, 110], [78, 94, 86], [92, 62, 63], [97, 16, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3AA58E, #497C6E, #4E5E56, #5C3E3F, #611019 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: #3aa58e; --color-2: #497c6e; --color-3: #4e5e56; --color-4: #5c3e3f; --color-5: #611019. 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