#043146 + #16576B + #24718B + #37877E + #4A9689 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#043146

Lake Blue · MidnightBlue · Peacock Green

HEX

#043146

RGB

rgb(4, 49, 70)

HSL

hsl(199, 89%, 15%)

HSB

hsb(199, 94%, 27%)

CMYK

cmyk(94%, 30%, 0%, 73%)

Oklch

oklch(29.6% 0.059 234.9)

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

#16576B

Lake Blue · DarkSlateGray · Peacock Green

HEX

#16576B

RGB

rgb(22, 87, 107)

HSL

hsl(194, 66%, 25%)

HSB

hsb(194, 79%, 42%)

CMYK

cmyk(79%, 19%, 0%, 58%)

Oklch

oklch(42.7% 0.071 223.1)

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

#24718B

Lake Blue · Teal · Mint Ice

HEX

#24718B

RGB

rgb(36, 113, 139)

HSL

hsl(195, 59%, 34%)

HSB

hsb(195, 74%, 55%)

CMYK

cmyk(74%, 19%, 0%, 45%)

Oklch

oklch(51.4% 0.083 224.7)

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

#37877E

Mineral Blue · SeaGreen · Mint Ice

HEX

#37877E

RGB

rgb(55, 135, 126)

HSL

hsl(173, 42%, 37%)

HSB

hsb(173, 59%, 53%)

CMYK

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

Oklch

oklch(57.2% 0.079 185.2)

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

#4A9689

Mineral Blue · CadetBlue · Mint Ice

HEX

#4A9689

RGB

rgb(74, 150, 137)

HSL

hsl(170, 34%, 44%)

HSB

hsb(170, 51%, 59%)

CMYK

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

Oklch

oklch(62.1% 0.078 181.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

043146

481A04

Analogous

04483C

043146

041148

Triadic

043146

480433

334804

Split-Comp.

043146

480411

483C04

Tetradic

043146

3C0448

481A04

114804

Contrast Matrix WCAG 2.1 Contrast

043146	16576B	24718B	37877E	4A9689
—	1.7 Fail	2.5 Fail	3.2 AA Large	3.9 AA Large
1.7 Fail	—	1.5 Fail	1.9 Fail	2.3 Fail
2.5 Fail	1.5 Fail	—	1.3 Fail	1.6 Fail
3.2 AA Large	1.9 Fail	1.3 Fail	—	1.2 Fail
3.9 AA Large	2.3 Fail	1.6 Fail	1.2 Fail	—

White BG

13.7AAA

8.0AAA

5.5AA

4.3AA Large

3.5AA Large

Black BG

1.5Fail

2.6Fail

3.8AA Large

4.9AA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

171841

323366

454685

5A5A80

6B6C8C

Deuteranopia

151240

2E2A65

413B83

554F81

67618D

Tritanopia

063D3C

196262

28807F

3B8282

4E8F8F

Achromatopsia

262626

464646

5D5D5D

6E6E6E

7E7E7E

Shades & Tints Shades & Tints

#043146

Dark

Light

#16576B

Dark

Light

#24718B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #043146;
  --color-2: #16576b;
  --color-3: #24718b;
  --color-4: #37877e;
  --color-5: #4a9689;
}

SCSS

$color-1: #043146;
$color-2: #16576b;
$color-3: #24718b;
$color-4: #37877e;
$color-5: #4a9689;

TAILWIND

colors: {
  'brand-1': '#043146',
  'brand-2': '#16576b',
  'brand-3': '#24718b',
  'brand-4': '#37877e',
  'brand-5': '#4a9689',
}

RGB Array

[4, 49, 70], [22, 87, 107], [36, 113, 139], [55, 135, 126], [74, 150, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #043146, #16576B, #24718B, #37877E, #4A9689 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: #043146; --color-2: #16576b; --color-3: #24718b; --color-4: #37877e; --color-5: #4a9689. 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