#3A4646 + #0A968D + #00B79B + #48C7A1 + #3A4646 · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3A4646

Slate Blue · DarkSlateGray · Dark Stone

HEX

#3A4646

RGB

rgb(58, 70, 70)

HSL

hsl(180, 9%, 25%)

HSB

hsb(180, 17%, 27%)

CMYK

cmyk(17%, 0%, 0%, 73%)

Oklch

oklch(38.4% 0.016 196.5)

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

#0A968D

Mineral Blue · Teal · Mint Ice

HEX

#0A968D

RGB

rgb(10, 150, 141)

HSL

hsl(176, 88%, 31%)

HSB

hsb(176, 93%, 59%)

CMYK

cmyk(93%, 0%, 6%, 41%)

Oklch

oklch(60.7% 0.104 187.3)

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

#00B79B

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#00B79B

RGB

rgb(0, 183, 155)

HSL

hsl(171, 100%, 36%)

HSB

hsb(171, 100%, 72%)

CMYK

cmyk(100%, 0%, 15%, 28%)

Oklch

oklch(69.7% 0.130 176.5)

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

#48C7A1

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#48C7A1

RGB

rgb(72, 199, 161)

HSL

hsl(162, 53%, 53%)

HSB

hsb(162, 64%, 78%)

CMYK

cmyk(64%, 0%, 19%, 22%)

Oklch

oklch(74.9% 0.125 169.6)

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

#3A4646

Slate Blue · DarkSlateGray · Dark Stone

HEX

#3A4646

RGB

rgb(58, 70, 70)

HSL

hsl(180, 9%, 25%)

HSB

hsb(180, 17%, 27%)

CMYK

cmyk(17%, 0%, 0%, 73%)

Oklch

oklch(38.4% 0.016 196.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A4646

453A3A

Analogous

3A4540

3A4646

3A4045

Triadic

3A4646

453A45

45453A

Split-Comp.

3A4646

453A40

45403A

Tetradic

3A4646

403A45

453A3A

40453A

Contrast Matrix WCAG 2.1 Contrast

3A4646	0A968D	00B79B	48C7A1	3A4646
—	2.7 Fail	3.8 AA Large	4.6 AA	—
2.7 Fail	—	1.4 Fail	1.7 Fail	2.7 Fail
3.8 AA Large	1.4 Fail	—	1.2 Fail	3.8 AA Large
4.6 AA	1.7 Fail	1.2 Fail	—	4.6 AA
—	2.7 Fail	3.8 AA Large	4.6 AA	—

White BG

9.8AAA

3.6AA Large

2.5Fail

2.1Fail

9.8AAA

Black BG

2.1Fail

5.8AA

8.2AAA

10.0AAA

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F46

47488F

4F51A2

7F80AA

3F3F46

Deuteranopia

3F3E46

3F3490

4537A3

786EAC

3F3E46

Tritanopia

3B4646

119191

09A7A8

4EB1B3

3B4646

Achromatopsia

424242

6B6B6B

7D7D7D

9D9D9D

424242

Shades & Tints Shades & Tints

#3A4646

Dark

Light

#0A968D

Dark

Light

#00B79B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a4646;
  --color-2: #0a968d;
  --color-3: #00b79b;
  --color-4: #48c7a1;
  --color-5: #3a4646;
}

SCSS

$color-1: #3a4646;
$color-2: #0a968d;
$color-3: #00b79b;
$color-4: #48c7a1;
$color-5: #3a4646;

TAILWIND

colors: {
  'brand-1': '#3a4646',
  'brand-2': '#0a968d',
  'brand-3': '#00b79b',
  'brand-4': '#48c7a1',
  'brand-5': '#3a4646',
}

RGB Array

[58, 70, 70], [10, 150, 141], [0, 183, 155], [72, 199, 161], [58, 70, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #3A4646, #0A968D, #00B79B, #48C7A1, #3A4646 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: #3a4646; --color-2: #0a968d; --color-3: #00b79b; --color-4: #48c7a1; --color-5: #3a4646. 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 space-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