#3D96AD + #5186A1 + #6E6D8F + #8B547D + #B23063 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3D96AD

Slate Blue · SteelBlue · Mint Ice

HEX

#3D96AD

RGB

rgb(61, 150, 173)

HSL

hsl(192, 48%, 46%)

HSB

hsb(192, 65%, 68%)

CMYK

cmyk(65%, 13%, 0%, 32%)

Oklch

oklch(62.9% 0.090 217.8)

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

#5186A1

Slate Blue · SteelBlue · Navy Blue

HEX

#5186A1

RGB

rgb(81, 134, 161)

HSL

hsl(200, 33%, 47%)

HSB

hsb(200, 50%, 63%)

CMYK

cmyk(50%, 17%, 0%, 37%)

Oklch

oklch(59.4% 0.070 231.8)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#6E6D8F

Deep Indigo · SlateGray · Navy Blue

HEX

#6E6D8F

RGB

rgb(110, 109, 143)

HSL

hsl(242, 13%, 49%)

HSB

hsb(242, 24%, 56%)

CMYK

cmyk(23%, 24%, 0%, 44%)

Oklch

oklch(54.9% 0.053 285.9)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#8B547D

Rose Purple · DimGray · Violet

HEX

#8B547D

RGB

rgb(139, 84, 125)

HSL

hsl(315, 25%, 44%)

HSB

hsb(315, 40%, 55%)

CMYK

cmyk(0%, 40%, 10%, 45%)

Oklch

oklch(52.2% 0.092 336.8)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#B23063

Dark Violet · MediumVioletRed · Camellia

HEX

#B23063

RGB

rgb(178, 48, 99)

HSL

hsl(336, 58%, 44%)

HSB

hsb(336, 73%, 70%)

CMYK

cmyk(0%, 73%, 44%, 30%)

Oklch

oklch(52.2% 0.170 1.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D96AD

AE543D

Analogous

3DAE8C

3D96AD

3D5FAE

Triadic

3D96AD

AE3D97

97AE3D

Split-Comp.

3D96AD

AE3D5F

AE8C3D

Tetradic

3D96AD

8C3DAE

AE543D

5FAE3D

Contrast Matrix WCAG 2.1 Contrast

3D96AD	5186A1	6E6D8F	8B547D	B23063
—	1.2 Fail	1.5 Fail	1.7 Fail	1.8 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.5 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.2 Fail
1.7 Fail	1.4 Fail	1.2 Fail	—	1.0 Fail
1.8 Fail	1.5 Fail	1.2 Fail	1.0 Fail	—

White BG

3.4AA Large

4.0AA Large

4.9AA

5.7AA

6.0AA

Black BG

6.2AA

5.3AA

4.2AA Large

3.7AA Large

3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

6464A7

68689A

6E6E87

737373

7A7957

Deuteranopia

5E58A6

656199

6E6E85

767B71

818B54

Tritanopia

41A3A2

549594

6E807F

886B6A

AC4D4B

Achromatopsia

7E7E7E

797979

717171

696969

5D5D5D

Shades & Tints Shades & Tints

#3D96AD

Dark

Light

#5186A1

Dark

Light

#6E6D8F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d96ad;
  --color-2: #5186a1;
  --color-3: #6e6d8f;
  --color-4: #8b547d;
  --color-5: #b23063;
}

SCSS

$color-1: #3d96ad;
$color-2: #5186a1;
$color-3: #6e6d8f;
$color-4: #8b547d;
$color-5: #b23063;

TAILWIND

colors: {
  'brand-1': '#3d96ad',
  'brand-2': '#5186a1',
  'brand-3': '#6e6d8f',
  'brand-4': '#8b547d',
  'brand-5': '#b23063',
}

RGB Array

[61, 150, 173], [81, 134, 161], [110, 109, 143], [139, 84, 125], [178, 48, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D96AD, #5186A1, #6E6D8F, #8B547D, #B23063 is ideal for: corporate websites, product showcases, portfolios. 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: #3d96ad; --color-2: #5186a1; --color-3: #6e6d8f; --color-4: #8b547d; --color-5: #b23063. 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. 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