#45676C + #A19395 + #484051 + #77346F + #950E41 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#45676C

Slate Blue · DimGray · Mint Ice

HEX

#45676C

RGB

rgb(69, 103, 108)

HSL

hsl(188, 22%, 35%)

HSB

hsb(188, 36%, 42%)

CMYK

cmyk(36%, 5%, 0%, 58%)

Oklch

oklch(49.0% 0.040 207.5)

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

#A19395

Ash · DarkGray · Silver Sand

HEX

#A19395

RGB

rgb(161, 147, 149)

HSL

hsl(351, 7%, 60%)

HSB

hsb(351, 9%, 63%)

CMYK

cmyk(0%, 9%, 7%, 37%)

Oklch

oklch(67.6% 0.017 7.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#484051

Deep Indigo · DarkSlateGray · Eggplant

HEX

#484051

RGB

rgb(72, 64, 81)

HSL

hsl(268, 12%, 28%)

HSB

hsb(268, 21%, 32%)

CMYK

cmyk(11%, 21%, 0%, 68%)

Oklch

oklch(38.6% 0.030 306.3)

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

#77346F

Rose Purple · DimGray · Eggplant

HEX

#77346F

RGB

rgb(119, 52, 111)

HSL

hsl(307, 39%, 34%)

HSB

hsb(307, 56%, 47%)

CMYK

cmyk(0%, 56%, 7%, 53%)

Oklch

oklch(43.8% 0.122 332.2)

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

#950E41

Dark Violet · Brown · Camellia

HEX

#950E41

RGB

rgb(149, 14, 65)

HSL

hsl(337, 83%, 32%)

HSB

hsb(337, 91%, 58%)

CMYK

cmyk(0%, 91%, 56%, 42%)

Oklch

oklch(43.5% 0.166 7.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

45676C

6D4B46

Analogous

466D5E

45676C

46546D

Triadic

45676C

6D4668

686D46

Split-Comp.

45676C

6D4654

6D5E46

Tetradic

45676C

5E466D

6D4B46

546D46

Contrast Matrix WCAG 2.1 Contrast

45676C	A19395	484051	77346F	950E41
—	2.1 Fail	1.6 Fail	1.4 Fail	1.4 Fail
2.1 Fail	—	3.3 AA Large	2.8 Fail	2.9 Fail
1.6 Fail	3.3 AA Large	—	1.2 Fail	1.1 Fail
1.4 Fail	2.8 Fail	1.2 Fail	—	1.0 Fail
1.4 Fail	2.9 Fail	1.1 Fail	1.0 Fail	—

White BG

6.2AA

2.9Fail

9.9AAA

8.4AAA

8.7AAA

Black BG

3.4AA Large

7.1AAA

2.1Fail

2.5Fail

2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

54546B

9B9B95

45444D

5A5961

5B5935

Deuteranopia

524F6B

9C9D94

45464C

5E635D

626D32

Tritanopia

476A6A

A09494

484A49

745553

8E2B29

Achromatopsia

5D5D5D

979797

444444

4F4F4F

3C3C3C

Shades & Tints Shades & Tints

#45676C

Dark

Light

#A19395

Dark

Light

#484051

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #45676c;
  --color-2: #a19395;
  --color-3: #484051;
  --color-4: #77346f;
  --color-5: #950e41;
}

SCSS

$color-1: #45676c;
$color-2: #a19395;
$color-3: #484051;
$color-4: #77346f;
$color-5: #950e41;

TAILWIND

colors: {
  'brand-1': '#45676c',
  'brand-2': '#a19395',
  'brand-3': '#484051',
  'brand-4': '#77346f',
  'brand-5': '#950e41',
}

RGB Array

[69, 103, 108], [161, 147, 149], [72, 64, 81], [119, 52, 111], [149, 14, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #45676C, #A19395, #484051, #77346F, #950E41 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: #45676c; --color-2: #a19395; --color-3: #484051; --color-4: #77346f; --color-5: #950e41. 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