#3E5E8D + #3E7697 + #3F9A8F + #40BF99 + #43DA9F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3E5E8D

Indigo · DarkSlateBlue · Prussian Blue

HEX

#3E5E8D

RGB

rgb(62, 94, 141)

HSL

hsl(216, 39%, 40%)

HSB

hsb(216, 56%, 55%)

CMYK

cmyk(56%, 33%, 0%, 45%)

Oklch

oklch(47.9% 0.085 257.9)

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

#3E7697

Slate Blue · SteelBlue · Navy Blue

HEX

#3E7697

RGB

rgb(62, 118, 151)

HSL

hsl(202, 42%, 42%)

HSB

hsb(202, 59%, 59%)

CMYK

cmyk(59%, 22%, 0%, 41%)

Oklch

oklch(54.2% 0.079 236.5)

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

#3F9A8F

Mineral Blue · CadetBlue · Mint Ice

HEX

#3F9A8F

RGB

rgb(63, 154, 143)

HSL

hsl(173, 42%, 43%)

HSB

hsb(173, 59%, 60%)

CMYK

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

Oklch

oklch(62.9% 0.088 184.4)

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

#40BF99

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#40BF99

RGB

rgb(64, 191, 153)

HSL

hsl(162, 50%, 50%)

HSB

hsb(162, 66%, 75%)

CMYK

cmyk(66%, 0%, 20%, 25%)

Oklch

oklch(72.5% 0.124 169.2)

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

#43DA9F

Mineral Blue · MediumAquaMarine · Olive Green

HEX

#43DA9F

RGB

rgb(67, 218, 159)

HSL

hsl(157, 67%, 56%)

HSB

hsb(157, 69%, 85%)

CMYK

cmyk(69%, 0%, 27%, 15%)

Oklch

oklch(79.5% 0.152 162.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3E5E8D

8E6E3E

Analogous

3E868E

3E5E8D

463E8E

Triadic

3E5E8D

8E3E5E

5E8E3E

Split-Comp.

3E5E8D

8E463E

868E3E

Tetradic

3E5E8D

8E3E86

8E6E3E

3E8E46

Contrast Matrix WCAG 2.1 Contrast

3E5E8D	3E7697	3F9A8F	40BF99	43DA9F
—	1.3 Fail	2.0 Fail	2.9 Fail	3.7 AA Large
1.3 Fail	—	1.5 Fail	2.2 Fail	2.8 Fail
2.0 Fail	1.5 Fail	—	1.5 Fail	1.9 Fail
2.9 Fail	2.2 Fail	1.5 Fail	—	1.3 Fail
3.7 AA Large	2.8 Fail	1.9 Fail	1.3 Fail	—

White BG

6.6AA

4.9AA

3.4AA Large

2.3Fail

1.8Fail

Black BG

3.2AA Large

4.2AA Large

6.2AA

9.1AAA

11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4C82

56578F

666792

7778A2

8486AD

Deuteranopia

4A487F

534F8D

615A92

7066A4

7C70B1

Tritanopia

407977

418987

449494

46A9AB

4BB9BB

Achromatopsia

5A5A5A

696969

7E7E7E

959595

A6A6A6

Shades & Tints Shades & Tints

#3E5E8D

Dark

Light

#3E7697

Dark

Light

#3F9A8F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3e5e8d;
  --color-2: #3e7697;
  --color-3: #3f9a8f;
  --color-4: #40bf99;
  --color-5: #43da9f;
}

SCSS

$color-1: #3e5e8d;
$color-2: #3e7697;
$color-3: #3f9a8f;
$color-4: #40bf99;
$color-5: #43da9f;

TAILWIND

colors: {
  'brand-1': '#3e5e8d',
  'brand-2': '#3e7697',
  'brand-3': '#3f9a8f',
  'brand-4': '#40bf99',
  'brand-5': '#43da9f',
}

RGB Array

[62, 94, 141], [62, 118, 151], [63, 154, 143], [64, 191, 153], [67, 218, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3E5E8D, #3E7697, #3F9A8F, #40BF99, #43DA9F 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: #3e5e8d; --color-2: #3e7697; --color-3: #3f9a8f; --color-4: #40bf99; --color-5: #43da9f. 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