#3B9FB6 + #4A7680 + #4A4456 + #2F2640 + #160E24 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B9FB6

Lake Blue · SteelBlue · Mint Ice

HEX

#3B9FB6

RGB

rgb(59, 159, 182)

HSL

hsl(191, 51%, 47%)

HSB

hsb(191, 68%, 71%)

CMYK

cmyk(68%, 13%, 0%, 29%)

Oklch

oklch(65.4% 0.097 216.0)

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

#4A7680

Slate Blue · DimGray · Mint Ice

HEX

#4A7680

RGB

rgb(74, 118, 128)

HSL

hsl(191, 27%, 40%)

HSB

hsb(191, 42%, 50%)

CMYK

cmyk(42%, 8%, 0%, 50%)

Oklch

oklch(53.8% 0.051 213.7)

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

#4A4456

Deep Indigo · DarkSlateGray · Eggplant

HEX

#4A4456

RGB

rgb(74, 68, 86)

HSL

hsl(260, 12%, 30%)

HSB

hsb(260, 21%, 34%)

CMYK

cmyk(14%, 21%, 0%, 66%)

Oklch

oklch(40.0% 0.031 300.2)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#2F2640

Deep Indigo · DarkSlateGray · Dark Purple

HEX

#2F2640

RGB

rgb(47, 38, 64)

HSL

hsl(261, 25%, 20%)

HSB

hsb(261, 41%, 25%)

CMYK

cmyk(27%, 41%, 0%, 75%)

Oklch

oklch(29.1% 0.048 299.4)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#160E24

Deep Indigo · Black · Dark Purple

HEX

#160E24

RGB

rgb(22, 14, 36)

HSL

hsl(262, 44%, 10%)

HSB

hsb(262, 61%, 14%)

CMYK

cmyk(39%, 61%, 0%, 86%)

Oklch

oklch(18.7% 0.044 298.8)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B9FB6

B5513B

Analogous

3BB58E

3B9FB6

3B61B5

Triadic

3B9FB6

B53B9F

9FB53B

Split-Comp.

3B9FB6

B53B61

B58E3B

Tetradic

3B9FB6

8E3BB5

B5513B

61B53B

Contrast Matrix WCAG 2.1 Contrast

3B9FB6	4A7680	4A4456	2F2640	160E24
—	1.6 Fail	3.0 AA Large	4.6 AA	6.1 AA
1.6 Fail	—	1.9 Fail	2.8 Fail	3.7 AA Large
3.0 AA Large	1.9 Fail	—	1.5 Fail	2.0 Fail
4.6 AA	2.8 Fail	1.5 Fail	—	1.3 Fail
6.1 AA	3.7 AA Large	2.0 Fail	1.3 Fail	—

White BG

3.1AA Large

5.0AA

9.3AAA

14.3AAA

18.7AAA

Black BG

6.8AA

4.2AA Large

2.3Fail

1.5Fail

1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6667B0

5D5D7E

474752

2B2B3A

13121F

Deuteranopia

6159AF

5B577D

484851

2C2C38

13141D

Tritanopia

40ACAB

4C7C7B

4A4E4D

2F3534

161A1A

Achromatopsia

848484

6A6A6A

484848

2C2C2C

131313

Shades & Tints Shades & Tints

#3B9FB6

Dark

Light

#4A7680

Dark

Light

#4A4456

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b9fb6;
  --color-2: #4a7680;
  --color-3: #4a4456;
  --color-4: #2f2640;
  --color-5: #160e24;
}

SCSS

$color-1: #3b9fb6;
$color-2: #4a7680;
$color-3: #4a4456;
$color-4: #2f2640;
$color-5: #160e24;

TAILWIND

colors: {
  'brand-1': '#3b9fb6',
  'brand-2': '#4a7680',
  'brand-3': '#4a4456',
  'brand-4': '#2f2640',
  'brand-5': '#160e24',
}

RGB Array

[59, 159, 182], [74, 118, 128], [74, 68, 86], [47, 38, 64], [22, 14, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B9FB6, #4A7680, #4A4456, #2F2640, #160E24 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: #3b9fb6; --color-2: #4a7680; --color-3: #4a4456; --color-4: #2f2640; --color-5: #160e24. 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