#3B6963 + #2B8583 + #437872 + #229BA4 + #518C88 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B6963

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#3B6963

RGB

rgb(59, 105, 99)

HSL

hsl(172, 28%, 32%)

HSB

hsb(172, 44%, 41%)

CMYK

cmyk(44%, 0%, 6%, 59%)

Oklch

oklch(48.6% 0.052 185.0)

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

#2B8583

Mineral Blue · Teal · Mint Ice

HEX

#2B8583

RGB

rgb(43, 133, 131)

HSL

hsl(179, 51%, 35%)

HSB

hsb(179, 68%, 52%)

CMYK

cmyk(68%, 0%, 2%, 48%)

Oklch

oklch(56.4% 0.083 192.9)

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

#437872

Mineral Blue · SeaGreen · Mint Ice

HEX

#437872

RGB

rgb(67, 120, 114)

HSL

hsl(173, 28%, 37%)

HSB

hsb(173, 44%, 47%)

CMYK

cmyk(44%, 0%, 5%, 53%)

Oklch

oklch(53.4% 0.058 186.3)

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

#229BA4

Lake Blue · LightSeaGreen · Mint Ice

HEX

#229BA4

RGB

rgb(34, 155, 164)

HSL

hsl(184, 66%, 39%)

HSB

hsb(184, 79%, 64%)

CMYK

cmyk(79%, 5%, 0%, 36%)

Oklch

oklch(63.1% 0.100 202.7)

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

#518C88

Mineral Blue · CadetBlue · Mint Ice

HEX

#518C88

RGB

rgb(81, 140, 136)

HSL

hsl(176, 27%, 43%)

HSB

hsb(176, 42%, 55%)

CMYK

cmyk(42%, 0%, 3%, 45%)

Oklch

oklch(59.9% 0.062 190.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B6963

683B41

Analogous

3B684C

3B6963

3B5868

Triadic

3B6963

623B68

68623B

Split-Comp.

3B6963

683B58

684C3B

Tetradic

3B6963

4C3B68

683B41

58683B

Contrast Matrix WCAG 2.1 Contrast

3B6963	2B8583	437872	229BA4	518C88
—	1.4 Fail	1.2 Fail	1.9 Fail	1.6 Fail
1.4 Fail	—	1.1 Fail	1.3 Fail	1.1 Fail
1.2 Fail	1.1 Fail	—	1.5 Fail	1.3 Fail
1.9 Fail	1.3 Fail	1.5 Fail	—	1.2 Fail
1.6 Fail	1.1 Fail	1.3 Fail	1.2 Fail	—

White BG

6.2AA

4.4AA Large

5.0AA

3.3AA Large

3.8AA Large

Black BG

3.4AA Large

4.8AA

4.2AA Large

6.3AA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F64

525383

5A5A73

5657A2

6B6B89

Deuteranopia

4C4965

4D4684

575374

4F46A1

676389

Tritanopia

3D6666

308484

467575

28A0A0

548A8A

Achromatopsia

5B5B5B

6A6A6A

676767

787878

7A7A7A

Shades & Tints Shades & Tints

#3B6963

Dark

Light

#2B8583

Dark

Light

#437872

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b6963;
  --color-2: #2b8583;
  --color-3: #437872;
  --color-4: #229ba4;
  --color-5: #518c88;
}

SCSS

$color-1: #3b6963;
$color-2: #2b8583;
$color-3: #437872;
$color-4: #229ba4;
$color-5: #518c88;

TAILWIND

colors: {
  'brand-1': '#3b6963',
  'brand-2': '#2b8583',
  'brand-3': '#437872',
  'brand-4': '#229ba4',
  'brand-5': '#518c88',
}

RGB Array

[59, 105, 99], [43, 133, 131], [67, 120, 114], [34, 155, 164], [81, 140, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B6963, #2B8583, #437872, #229BA4, #518C88 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: #3b6963; --color-2: #2b8583; --color-3: #437872; --color-4: #229ba4; --color-5: #518c88. 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