← Back to Editor

#18344A · #045E6B · #516F71 · #73928A · #B6BDA2

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#18344A

Lake Blue · DarkSlateGray · Deep Sea Blue

HEX
#18344A
RGB
rgb(24, 52, 74)
HSL
hsl(206, 51%, 19%)
HSB
hsb(206, 68%, 29%)
CMYK
cmyk(68%, 30%, 0%, 71%)
Oklch
oklch(31.4% 0.052 244.3)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#045E6B

Lake Blue · Teal · Peacock Green

HEX
#045E6B
RGB
rgb(4, 94, 107)
HSL
hsl(188, 93%, 22%)
HSB
hsb(188, 96%, 42%)
CMYK
cmyk(96%, 12%, 0%, 58%)
Oklch
oklch(44.2% 0.076 211.3)

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

#516F71

Slate Blue · DimGray · Mint Ice

HEX
#516F71
RGB
rgb(81, 111, 113)
HSL
hsl(184, 16%, 38%)
HSB
hsb(184, 28%, 44%)
CMYK
cmyk(28%, 2%, 0%, 56%)
Oklch
oklch(51.9% 0.035 201.3)

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

#73928A

Mineral Blue · LightSlateGray · Lake Green

HEX
#73928A
RGB
rgb(115, 146, 138)
HSL
hsl(165, 12%, 51%)
HSB
hsb(165, 21%, 57%)
CMYK
cmyk(21%, 0%, 5%, 43%)
Oklch
oklch(63.4% 0.037 177.6)

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

#B6BDA2

Willow Green · DarkGray · Apple Green

HEX
#B6BDA2
RGB
rgb(182, 189, 162)
HSL
hsl(76, 17%, 69%)
HSB
hsb(76, 14%, 74%)
CMYK
cmyk(4%, 0%, 14%, 26%)
Oklch
oklch(78.5% 0.038 119.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

18344A
492D18

Analogous

184946
18344A
181B49

Triadic

18344A
491834
344918

Split-Comp.

18344A
49181B
494618

Tetradic

18344A
461849
492D18
1B4918

Contrast Matrix WCAG 2.1 Contrast

18344A
045E6B
516F71
73928A
B6BDA2
—
1.7
Fail
2.4
Fail
3.8
AA Large
6.6
AA
1.7
Fail
—
1.4
Fail
2.2
Fail
3.8
AA Large
2.4
Fail
1.4
Fail
—
1.6
Fail
2.8
Fail
3.8
AA Large
2.2
Fail
1.6
Fail
—
1.7
Fail
6.6
AA
3.8
AA Large
2.8
Fail
1.7
Fail
—
White BG
12.9AAA
7.5AAA
5.4AA
3.4AA Large
1.9Fail
Black BG
1.6Fail
2.8Fail
3.9AA Large
6.2AA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

242445
2B2C68
5E5E71
80818C
B9B9A9

Deuteranopia

232043
261F67
5C5A70
7F7C8C
B9B8AA

Tritanopia

194040
096565
537070
758D8E
B6AEAF

Achromatopsia

2E2E2E
454545
666666
888888
B8B8B8

Shades & Tints Shades & Tints

#18344A

Dark
Light

#045E6B

Dark
Light

#516F71

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #18344a;
  --color-2: #045e6b;
  --color-3: #516f71;
  --color-4: #73928a;
  --color-5: #b6bda2;
}

SCSS

$color-1: #18344a;
$color-2: #045e6b;
$color-3: #516f71;
$color-4: #73928a;
$color-5: #b6bda2;

TAILWIND

colors: {
  'brand-1': '#18344a',
  'brand-2': '#045e6b',
  'brand-3': '#516f71',
  'brand-4': '#73928a',
  'brand-5': '#b6bda2',
}

RGB Array

[24, 52, 74], [4, 94, 107], [81, 111, 113], [115, 146, 138], [182, 189, 162]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #18344A, #045E6B, #516F71, #73928A, #B6BDA2 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #18344a; --color-2: #045e6b; --color-3: #516f71; --color-4: #73928a; --color-5: #b6bda2. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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