#4D2261 + #5C447B + #675C9F + #6384BB + #529ACF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4D2261

Dark Plum · DarkSlateBlue · Eggplant

HEX

#4D2261

RGB

rgb(77, 34, 97)

HSL

hsl(281, 48%, 26%)

HSB

hsb(281, 65%, 38%)

CMYK

cmyk(21%, 65%, 0%, 62%)

Oklch

oklch(34.3% 0.113 313.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#5C447B

Deep Indigo · DarkSlateBlue · Eggplant

HEX

#5C447B

RGB

rgb(92, 68, 123)

HSL

hsl(266, 29%, 37%)

HSB

hsb(266, 45%, 48%)

CMYK

cmyk(25%, 45%, 0%, 52%)

Oklch

oklch(43.7% 0.092 302.9)

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

#675C9F

Deep Indigo · SlateGray · Navy Blue

HEX

#675C9F

RGB

rgb(103, 92, 159)

HSL

hsl(250, 27%, 49%)

HSB

hsb(250, 42%, 62%)

CMYK

cmyk(35%, 42%, 0%, 38%)

Oklch

oklch(51.5% 0.104 289.8)

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

#6384BB

Azure · SteelBlue · Navy Blue

HEX

#6384BB

RGB

rgb(99, 132, 187)

HSL

hsl(218, 39%, 56%)

HSB

hsb(218, 47%, 73%)

CMYK

cmyk(47%, 29%, 0%, 27%)

Oklch

oklch(61.1% 0.092 260.3)

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

#529ACF

Lake Blue · CornflowerBlue · Navy Blue

HEX

#529ACF

RGB

rgb(82, 154, 207)

HSL

hsl(205, 57%, 57%)

HSB

hsb(205, 60%, 81%)

CMYK

cmyk(60%, 26%, 0%, 19%)

Oklch

oklch(66.2% 0.107 242.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D2261

376222

Analogous

2E2262

4D2261

622256

Triadic

4D2261

624E22

22624E

Split-Comp.

4D2261

566222

22622E

Tetradic

4D2261

622E22

376222

225662

Contrast Matrix WCAG 2.1 Contrast

4D2261	5C447B	675C9F	6384BB	529ACF
—	1.5 Fail	2.1 Fail	3.2 AA Large	4.0 AA Large
1.5 Fail	—	1.4 Fail	2.2 Fail	2.7 Fail
2.1 Fail	1.4 Fail	—	1.5 Fail	1.9 Fail
3.2 AA Large	2.2 Fail	1.5 Fail	—	1.2 Fail
4.0 AA Large	2.7 Fail	1.9 Fail	1.2 Fail	—

White BG

12.2AAA

8.2AAA

5.8AA

3.8AA Large

3.1AA Large

Black BG

1.7Fail

2.6Fail

3.6AA Large

5.5AA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A52

52516E

62628F

7172AE

7172C2

Deuteranopia

3D404E

53556B

63648B

6F6DAB

6D68BF

Tritanopia

4B4643

5B6361

66827F

65A3A1

56B8B6

Achromatopsia

363636

515151

676767

808080

8B8B8B

Shades & Tints Shades & Tints

#4D2261

Dark

Light

#5C447B

Dark

Light

#675C9F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d2261;
  --color-2: #5c447b;
  --color-3: #675c9f;
  --color-4: #6384bb;
  --color-5: #529acf;
}

SCSS

$color-1: #4d2261;
$color-2: #5c447b;
$color-3: #675c9f;
$color-4: #6384bb;
$color-5: #529acf;

TAILWIND

colors: {
  'brand-1': '#4d2261',
  'brand-2': '#5c447b',
  'brand-3': '#675c9f',
  'brand-4': '#6384bb',
  'brand-5': '#529acf',
}

RGB Array

[77, 34, 97], [92, 68, 123], [103, 92, 159], [99, 132, 187], [82, 154, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D2261, #5C447B, #675C9F, #6384BB, #529ACF 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: #4d2261; --color-2: #5c447b; --color-3: #675c9f; --color-4: #6384bb; --color-5: #529acf. 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