← Back to Editor

#534B7A · #BE4D9B · #B67638 · #A1719B · #C180B6

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#534B7A

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#534B7A
RGB
rgb(83, 75, 122)
HSL
hsl(250, 24%, 39%)
HSB
hsb(250, 39%, 48%)
CMYK
cmyk(32%, 39%, 0%, 52%)
Oklch
oklch(44.2% 0.076 290.7)

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

#BE4D9B

Rose Purple · MediumOrchid · Violet

HEX
#BE4D9B
RGB
rgb(190, 77, 155)
HSL
hsl(319, 47%, 52%)
HSB
hsb(319, 59%, 75%)
CMYK
cmyk(0%, 59%, 18%, 25%)
Oklch
oklch(59.3% 0.170 341.5)

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

#B67638

Ochre · Chocolate · Amber Brown

HEX
#B67638
RGB
rgb(182, 118, 56)
HSL
hsl(30, 53%, 47%)
HSB
hsb(30, 69%, 71%)
CMYK
cmyk(0%, 35%, 69%, 29%)
Oklch
oklch(62.2% 0.112 62.2)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#A1719B

Rose Purple · Gray · Violet

HEX
#A1719B
RGB
rgb(161, 113, 155)
HSL
hsl(308, 20%, 54%)
HSB
hsb(308, 30%, 63%)
CMYK
cmyk(0%, 30%, 4%, 37%)
Oklch
oklch(61.2% 0.084 330.9)

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

#C180B6

Mauve · Orchid · Lilac Purple

HEX
#C180B6
RGB
rgb(193, 128, 182)
HSL
hsl(310, 34%, 63%)
HSB
hsb(310, 34%, 76%)
CMYK
cmyk(0%, 34%, 6%, 24%)
Oklch
oklch(68.4% 0.107 332.9)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

534B7A
737B4C

Analogous

4C5B7B
534B7A
6B4C7B

Triadic

534B7A
7B544C
4C7B54

Split-Comp.

534B7A
7B6B4C
5B7B4C

Tetradic

534B7A
7B4C5B
737B4C
4C7B6B

Contrast Matrix WCAG 2.1 Contrast

534B7A
BE4D9B
B67638
A1719B
C180B6
—
1.8
Fail
2.1
Fail
2.0
Fail
2.6
Fail
1.8
Fail
—
1.2
Fail
1.1
Fail
1.5
Fail
2.1
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
2.0
Fail
1.1
Fail
1.1
Fail
—
1.3
Fail
2.6
Fail
1.5
Fail
1.2
Fail
1.3
Fail
—
White BG
7.9AAA
4.4AA Large
3.7AA Large
3.9AA Large
3.0Fail
Black BG
2.7Fail
4.7AA
5.6AA
5.4AA
7.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

504F6F
8D8C88
9A9A47
8C8C91
A5A4A9

Deuteranopia

50516C
949C84
9EA34B
8F938E
A9AEA6

Tritanopia

536664
B87976
B35355
9F8987
BE9F9C

Achromatopsia

535353
787878
828282
848484
9A9A9A

Shades & Tints Shades & Tints

#534B7A

Dark
Light

#BE4D9B

Dark
Light

#B67638

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #534b7a;
  --color-2: #be4d9b;
  --color-3: #b67638;
  --color-4: #a1719b;
  --color-5: #c180b6;
}

SCSS

$color-1: #534b7a;
$color-2: #be4d9b;
$color-3: #b67638;
$color-4: #a1719b;
$color-5: #c180b6;

TAILWIND

colors: {
  'brand-1': '#534b7a',
  'brand-2': '#be4d9b',
  'brand-3': '#b67638',
  'brand-4': '#a1719b',
  'brand-5': '#c180b6',
}

RGB Array

[83, 75, 122], [190, 77, 155], [182, 118, 56], [161, 113, 155], [193, 128, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #534B7A, #BE4D9B, #B67638, #A1719B, #C180B6 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: #534b7a; --color-2: #be4d9b; --color-3: #b67638; --color-4: #a1719b; --color-5: #c180b6. 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