← Back to Editor

#3D4D4C · #457874 · #5DB0AA · #7CD3CA · #ACDFDB

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

#3D4D4C

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#3D4D4C
RGB
rgb(61, 77, 76)
HSL
hsl(176, 12%, 27%)
HSB
hsb(176, 21%, 30%)
CMYK
cmyk(21%, 0%, 1%, 70%)
Oklch
oklch(40.6% 0.020 191.7)

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

#457874

Mineral Blue · DimGray · Mint Ice

HEX
#457874
RGB
rgb(69, 120, 116)
HSL
hsl(175, 27%, 37%)
HSB
hsb(175, 43%, 47%)
CMYK
cmyk(43%, 0%, 3%, 53%)
Oklch
oklch(53.6% 0.055 189.2)

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

#5DB0AA

Mineral Blue · CadetBlue · Lake Green

HEX
#5DB0AA
RGB
rgb(93, 176, 170)
HSL
hsl(176, 34%, 53%)
HSB
hsb(176, 47%, 69%)
CMYK
cmyk(47%, 0%, 3%, 31%)
Oklch
oklch(70.3% 0.082 189.3)

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

#7CD3CA

Jade · SkyBlue · Lake Green

HEX
#7CD3CA
RGB
rgb(124, 211, 202)
HSL
hsl(174, 50%, 66%)
HSB
hsb(174, 41%, 83%)
CMYK
cmyk(41%, 0%, 4%, 17%)
Oklch
oklch(80.9% 0.086 187.1)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#ACDFDB

Jade · LightBlue · Glacier Blue

HEX
#ACDFDB
RGB
rgb(172, 223, 219)
HSL
hsl(175, 44%, 77%)
HSB
hsb(175, 23%, 87%)
CMYK
cmyk(23%, 0%, 2%, 13%)
Oklch
oklch(86.7% 0.053 190.3)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D4D4C
4D3D3E

Analogous

3D4D44
3D4D4C
3D464D

Triadic

3D4D4C
4C3D4D
4D4C3D

Split-Comp.

3D4D4C
4D3D46
4D443D

Tetradic

3D4D4C
443D4D
4D3D3E
464D3D

Contrast Matrix WCAG 2.1 Contrast

3D4D4C
457874
5DB0AA
7CD3CA
ACDFDB
—
1.8
Fail
3.5
AA Large
5.1
AA
6.1
AA
1.8
Fail
—
2.0
Fail
2.9
Fail
3.4
AA Large
3.5
AA Large
2.0
Fail
—
1.5
Fail
1.7
Fail
5.1
AA
2.9
Fail
1.5
Fail
—
1.2
Fail
6.1
AA
3.4
AA Large
1.7
Fail
1.2
Fail
—
White BG
8.9AAA
5.0AA
2.5Fail
1.7Fail
1.5Fail
Black BG
2.4Fail
4.2AA Large
8.3AAA
12.0AAA
14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

44444C
5B5C75
8182AB
A2A2CC
C2C3DC

Deuteranopia

43424C
585475
7C76AC
9D96CD
BFBBDC

Tritanopia

3E4C4C
487676
61ADAD
80CECE
AFDDDD

Achromatopsia

484848
686868
969696
B8B8B8
CFCFCF

Shades & Tints Shades & Tints

#3D4D4C

Dark
Light

#457874

Dark
Light

#5DB0AA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d4d4c;
  --color-2: #457874;
  --color-3: #5db0aa;
  --color-4: #7cd3ca;
  --color-5: #acdfdb;
}

SCSS

$color-1: #3d4d4c;
$color-2: #457874;
$color-3: #5db0aa;
$color-4: #7cd3ca;
$color-5: #acdfdb;

TAILWIND

colors: {
  'brand-1': '#3d4d4c',
  'brand-2': '#457874',
  'brand-3': '#5db0aa',
  'brand-4': '#7cd3ca',
  'brand-5': '#acdfdb',
}

RGB Array

[61, 77, 76], [69, 120, 116], [93, 176, 170], [124, 211, 202], [172, 223, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D4D4C, #457874, #5DB0AA, #7CD3CA, #ACDFDB is ideal for: 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: #3d4d4c; --color-2: #457874; --color-3: #5db0aa; --color-4: #7cd3ca; --color-5: #acdfdb. 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. 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