#3C9CAA + #472D46 + #591ABD + #E24EF2 + #6D6873 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3C9CAA

Slate Blue · SteelBlue · Mint Ice

HEX

#3C9CAA

RGB

rgb(60, 156, 170)

HSL

hsl(188, 48%, 45%)

HSB

hsb(188, 65%, 67%)

CMYK

cmyk(65%, 8%, 0%, 33%)

Oklch

oklch(64.2% 0.090 208.6)

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

#472D46

Rose Purple · DarkSlateGray · Eggplant

HEX

#472D46

RGB

rgb(71, 45, 70)

HSL

hsl(302, 22%, 23%)

HSB

hsb(302, 37%, 28%)

CMYK

cmyk(0%, 37%, 1%, 72%)

Oklch

oklch(33.9% 0.055 328.0)

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

#591ABD

Deep Indigo · DarkSlateBlue · Violet

HEX

#591ABD

RGB

rgb(89, 26, 189)

HSL

hsl(263, 76%, 42%)

HSB

hsb(263, 86%, 74%)

CMYK

cmyk(53%, 86%, 0%, 26%)

Oklch

oklch(43.1% 0.223 291.0)

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

#E24EF2

Lilac · Orchid · Lilac Purple

HEX

#E24EF2

RGB

rgb(226, 78, 242)

HSL

hsl(294, 86%, 63%)

HSB

hsb(294, 68%, 95%)

CMYK

cmyk(7%, 68%, 0%, 5%)

Oklch

oklch(68.8% 0.256 323.7)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#6D6873

Ink Gray · DimGray · Warm Gray

HEX

#6D6873

RGB

rgb(109, 104, 115)

HSL

hsl(267, 5%, 43%)

HSB

hsb(267, 10%, 45%)

CMYK

cmyk(5%, 10%, 0%, 55%)

Oklch

oklch(52.6% 0.018 306.2)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C9CAA

AA4A3C

Analogous

3CAA81

3C9CAA

3C64AA

Triadic

3C9CAA

AA3C9B

9BAA3C

Split-Comp.

3C9CAA

AA3C64

AA813C

Tetradic

3C9CAA

813CAA

AA4A3C

64AA3C

Contrast Matrix WCAG 2.1 Contrast

3C9CAA	472D46	591ABD	E24EF2	6D6873
—	3.8 AA Large	2.8 Fail	1.0 Fail	1.7 Fail
3.8 AA Large	—	1.3 Fail	3.8 AA Large	2.2 Fail
2.8 Fail	1.3 Fail	—	2.9 Fail	1.7 Fail
1.0 Fail	3.8 AA Large	2.9 Fail	—	1.7 Fail
1.7 Fail	2.2 Fail	1.7 Fail	1.7 Fail	—

White BG

3.2AA Large

12.1AAA

9.1AAA

3.2AA Large

5.4AA

Black BG

6.5AA

1.7Fail

2.3Fail

6.6AA

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

6666A7

3C3C40

3E3D96

A2A1CA

6B6B70

Deuteranopia

6059A6

3D3F3F

41468C

ABB6C1

6B6C70

Tritanopia

41A4A3

463B3A

567670

DBABA4

6D6E6E

Achromatopsia

818181

383838

3F3F3F

8D8D8D

6B6B6B

Shades & Tints Shades & Tints

#3C9CAA

Dark

Light

#472D46

Dark

Light

#591ABD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c9caa;
  --color-2: #472d46;
  --color-3: #591abd;
  --color-4: #e24ef2;
  --color-5: #6d6873;
}

SCSS

$color-1: #3c9caa;
$color-2: #472d46;
$color-3: #591abd;
$color-4: #e24ef2;
$color-5: #6d6873;

TAILWIND

colors: {
  'brand-1': '#3c9caa',
  'brand-2': '#472d46',
  'brand-3': '#591abd',
  'brand-4': '#e24ef2',
  'brand-5': '#6d6873',
}

RGB Array

[60, 156, 170], [71, 45, 70], [89, 26, 189], [226, 78, 242], [109, 104, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C9CAA, #472D46, #591ABD, #E24EF2, #6D6873 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: #3c9caa; --color-2: #472d46; --color-3: #591abd; --color-4: #e24ef2; --color-5: #6d6873. 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