#353F40 + #198571 + #353F40 + #04646B + #353F40 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#353F40

Slate Blue · DarkSlateGray · Dark Stone

HEX

#353F40

RGB

rgb(53, 63, 64)

HSL

hsl(185, 9%, 23%)

HSB

hsb(185, 17%, 25%)

CMYK

cmyk(17%, 2%, 0%, 75%)

Oklch

oklch(35.9% 0.013 203.9)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#198571

Mineral Blue · Teal · Mint Ice

HEX

#198571

RGB

rgb(25, 133, 113)

HSL

hsl(169, 68%, 31%)

HSB

hsb(169, 81%, 52%)

CMYK

cmyk(81%, 0%, 15%, 48%)

Oklch

oklch(55.4% 0.097 176.4)

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

#353F40

Slate Blue · DarkSlateGray · Dark Stone

HEX

#353F40

RGB

rgb(53, 63, 64)

HSL

hsl(185, 9%, 23%)

HSB

hsb(185, 17%, 25%)

CMYK

cmyk(17%, 2%, 0%, 75%)

Oklch

oklch(35.9% 0.013 203.9)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#04646B

Lake Blue · Teal · Peacock Green

HEX

#04646B

RGB

rgb(4, 100, 107)

HSL

hsl(184, 93%, 22%)

HSB

hsb(184, 96%, 42%)

CMYK

cmyk(96%, 7%, 0%, 58%)

Oklch

oklch(45.9% 0.077 203.3)

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

#353F40

Slate Blue · DarkSlateGray · Dark Stone

HEX

#353F40

RGB

rgb(53, 63, 64)

HSL

hsl(185, 9%, 23%)

HSB

hsb(185, 17%, 25%)

CMYK

cmyk(17%, 2%, 0%, 75%)

Oklch

oklch(35.9% 0.013 203.9)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

353F40

403635

Analogous

35403C

353F40

353A40

Triadic

353F40

40353F

3F4035

Split-Comp.

353F40

40353A

403C35

Tetradic

353F40

3C3540

403635

3A4035

Contrast Matrix WCAG 2.1 Contrast

353F40	198571	353F40	04646B	353F40
—	2.4 Fail	—	1.6 Fail	—
2.4 Fail	—	2.4 Fail	1.5 Fail	2.4 Fail
—	2.4 Fail	—	1.6 Fail	—
1.6 Fail	1.5 Fail	1.6 Fail	—	1.6 Fail
—	2.4 Fail	—	1.6 Fail	—

White BG

10.8AAA

4.5AA

10.8AAA

6.9AA

10.8AAA

Black BG

1.9Fail

4.6AA

1.9Fail

3.0AA Large

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

393940

484976

393940

2E2E69

393940

Deuteranopia

393840

423977

393840

282169

393840

Tritanopia

354040

1E7A7B

354040

096868

354040

Achromatopsia

3C3C3C

626262

3C3C3C

484848

3C3C3C

Shades & Tints Shades & Tints

#353F40

Dark

Light

#198571

Dark

Light

#353F40

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #353f40;
  --color-2: #198571;
  --color-3: #353f40;
  --color-4: #04646b;
  --color-5: #353f40;
}

SCSS

$color-1: #353f40;
$color-2: #198571;
$color-3: #353f40;
$color-4: #04646b;
$color-5: #353f40;

TAILWIND

colors: {
  'brand-1': '#353f40',
  'brand-2': '#198571',
  'brand-3': '#353f40',
  'brand-4': '#04646b',
  'brand-5': '#353f40',
}

RGB Array

[53, 63, 64], [25, 133, 113], [53, 63, 64], [4, 100, 107], [53, 63, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #353F40, #198571, #353F40, #04646B, #353F40 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: #353f40; --color-2: #198571; --color-3: #353f40; --color-4: #04646b; --color-5: #353f40. 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