#AB0E46 + #803C4B + #5A3F47 + #534852 + #49535B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AB0E46

Dark Violet · Brown · Camellia

HEX

#AB0E46

RGB

rgb(171, 14, 70)

HSL

hsl(339, 85%, 36%)

HSB

hsb(339, 92%, 67%)

CMYK

cmyk(0%, 92%, 59%, 33%)

Oklch

oklch(47.9% 0.185 9.5)

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

#803C4B

Crimson · Sienna · Wine Red

HEX

#803C4B

RGB

rgb(128, 60, 75)

HSL

hsl(347, 36%, 37%)

HSB

hsb(347, 53%, 50%)

CMYK

cmyk(0%, 53%, 41%, 50%)

Oklch

oklch(44.9% 0.095 7.8)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#5A3F47

Dark Violet · DarkSlateGray · Camellia

HEX

#5A3F47

RGB

rgb(90, 63, 71)

HSL

hsl(342, 18%, 30%)

HSB

hsb(342, 30%, 35%)

CMYK

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

Oklch

oklch(40.1% 0.040 359.6)

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

#534852

Dark Cyan · DarkSlateGray · Charcoal

HEX

#534852

RGB

rgb(83, 72, 82)

HSL

hsl(305, 7%, 30%)

HSB

hsb(305, 13%, 33%)

CMYK

cmyk(0%, 13%, 1%, 67%)

Oklch

oklch(41.6% 0.022 328.8)

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

#49535B

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#49535B

RGB

rgb(73, 83, 91)

HSL

hsl(207, 11%, 32%)

HSB

hsb(207, 20%, 36%)

CMYK

cmyk(20%, 9%, 0%, 64%)

Oklch

oklch(43.6% 0.018 242.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB0E46

0EAA73

Analogous

AA0E92

AB0E46

AA250E

Triadic

AB0E46

44AA0E

0E44AA

Split-Comp.

AB0E46

0EAA25

0E92AA

Tetradic

AB0E46

92AA0E

0EAA73

250EAA

Contrast Matrix WCAG 2.1 Contrast

AB0E46	803C4B	5A3F47	534852	49535B
—	1.1 Fail	1.3 Fail	1.2 Fail	1.1 Fail
1.1 Fail	—	1.2 Fail	1.1 Fail	1.0 Fail
1.3 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.1 Fail	1.0 Fail	1.2 Fail	1.1 Fail	—

White BG

7.3AAA

7.9AAA

9.4AAA

8.7AAA

7.9AAA

Black BG

2.9Fail

2.7Fail

2.2Fail

2.4Fail

2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

676638

636247

4E4E45

4E4E50

4D4D59

Deuteranopia

707C35

676C47

505245

4F504F

4D4C59

Tritanopia

A32E2B

7D4544

594443

524E4D

4A5857

Achromatopsia

434343

525252

484848

4C4C4C

515151

Shades & Tints Shades & Tints

#AB0E46

Dark

Light

#803C4B

Dark

Light

#5A3F47

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab0e46;
  --color-2: #803c4b;
  --color-3: #5a3f47;
  --color-4: #534852;
  --color-5: #49535b;
}

SCSS

$color-1: #ab0e46;
$color-2: #803c4b;
$color-3: #5a3f47;
$color-4: #534852;
$color-5: #49535b;

TAILWIND

colors: {
  'brand-1': '#ab0e46',
  'brand-2': '#803c4b',
  'brand-3': '#5a3f47',
  'brand-4': '#534852',
  'brand-5': '#49535b',
}

RGB Array

[171, 14, 70], [128, 60, 75], [90, 63, 71], [83, 72, 82], [73, 83, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB0E46, #803C4B, #5A3F47, #534852, #49535B 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: #ab0e46; --color-2: #803c4b; --color-3: #5a3f47; --color-4: #534852; --color-5: #49535b. 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