#4A404A + #8C224E + #CD0452 + #BD145A + #8C6F8C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4A404A

Dark Cyan · DarkSlateGray · Charcoal

HEX

#4A404A

RGB

rgb(74, 64, 74)

HSL

hsl(300, 7%, 27%)

HSB

hsb(300, 14%, 29%)

CMYK

cmyk(0%, 14%, 0%, 71%)

Oklch

oklch(38.5% 0.021 326.0)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#8C224E

Dark Violet · Brown · Camellia

HEX

#8C224E

RGB

rgb(140, 34, 78)

HSL

hsl(335, 61%, 34%)

HSB

hsb(335, 76%, 55%)

CMYK

cmyk(0%, 76%, 44%, 45%)

Oklch

oklch(43.6% 0.145 0.1)

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

#CD0452

Dark Violet · Crimson · Camellia

HEX

#CD0452

RGB

rgb(205, 4, 82)

HSL

hsl(337, 96%, 41%)

HSB

hsb(337, 98%, 80%)

CMYK

cmyk(0%, 98%, 60%, 20%)

Oklch

oklch(54.3% 0.216 10.1)

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

#BD145A

Dark Violet · Crimson · Camellia

HEX

#BD145A

RGB

rgb(189, 20, 90)

HSL

hsl(335, 81%, 41%)

HSB

hsb(335, 89%, 74%)

CMYK

cmyk(0%, 89%, 52%, 26%)

Oklch

oklch(52.0% 0.200 4.7)

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

#8C6F8C

Rose Purple · Gray · Violet

HEX

#8C6F8C

RGB

rgb(140, 111, 140)

HSL

hsl(300, 12%, 49%)

HSB

hsb(300, 21%, 55%)

CMYK

cmyk(0%, 21%, 0%, 45%)

Oklch

oklch(58.0% 0.056 326.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4A404A

404A40

Analogous

45404A

4A404A

4A4045

Triadic

4A404A

4A4A40

404A4A

Split-Comp.

4A404A

454A40

404A45

Tetradic

4A404A

4A4540

404A40

40454A

Contrast Matrix WCAG 2.1 Contrast

4A404A	8C224E	CD0452	BD145A	8C6F8C
—	1.2 Fail	1.8 Fail	1.6 Fail	2.2 Fail
1.2 Fail	—	1.5 Fail	1.4 Fail	1.9 Fail
1.8 Fail	1.5 Fail	—	1.1 Fail	1.3 Fail
1.6 Fail	1.4 Fail	1.1 Fail	—	1.4 Fail
2.2 Fail	1.9 Fail	1.3 Fail	1.4 Fail	—

White BG

9.9AAA

8.6AAA

5.6AA

6.2AA

4.4AA Large

Black BG

2.1Fail

2.5Fail

3.7AA Large

3.4AA Large

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

464648

5E5D43

76743F

747249

7F7F85

Deuteranopia

464747

646C41

82913B

7E8A45

818383

Tritanopia

4A4645

873B39

C3302D

B53C39

8B7F7E

Achromatopsia

444444

474747

494949

4F4F4F

7B7B7B

Shades & Tints Shades & Tints

#4A404A

Dark

Light

#8C224E

Dark

Light

#CD0452

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4a404a;
  --color-2: #8c224e;
  --color-3: #cd0452;
  --color-4: #bd145a;
  --color-5: #8c6f8c;
}

SCSS

$color-1: #4a404a;
$color-2: #8c224e;
$color-3: #cd0452;
$color-4: #bd145a;
$color-5: #8c6f8c;

TAILWIND

colors: {
  'brand-1': '#4a404a',
  'brand-2': '#8c224e',
  'brand-3': '#cd0452',
  'brand-4': '#bd145a',
  'brand-5': '#8c6f8c',
}

RGB Array

[74, 64, 74], [140, 34, 78], [205, 4, 82], [189, 20, 90], [140, 111, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4A404A, #8C224E, #CD0452, #BD145A, #8C6F8C 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: #4a404a; --color-2: #8c224e; --color-3: #cd0452; --color-4: #bd145a; --color-5: #8c6f8c. 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