#57214A + #7A0F36 + #A80C30 + #405357 + #A6491B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#57214A

Rose Purple · DarkSlateGray · Eggplant

HEX

#57214A

RGB

rgb(87, 33, 74)

HSL

hsl(314, 45%, 24%)

HSB

hsb(314, 62%, 34%)

CMYK

cmyk(0%, 62%, 15%, 66%)

Oklch

oklch(34.3% 0.097 337.9)

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

#7A0F36

Dark Violet · Brown · Camellia

HEX

#7A0F36

RGB

rgb(122, 15, 54)

HSL

hsl(338, 78%, 27%)

HSB

hsb(338, 88%, 48%)

CMYK

cmyk(0%, 88%, 56%, 52%)

Oklch

oklch(38.0% 0.141 6.6)

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

#A80C30

Vermilion · FireBrick · Wine Red

HEX

#A80C30

RGB

rgb(168, 12, 48)

HSL

hsl(346, 87%, 35%)

HSB

hsb(346, 93%, 66%)

CMYK

cmyk(0%, 93%, 71%, 34%)

Oklch

oklch(46.8% 0.182 18.3)

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

#405357

Slate Blue · DarkSlateGray · Mint Ice

HEX

#405357

RGB

rgb(64, 83, 87)

HSL

hsl(190, 15%, 30%)

HSB

hsb(190, 26%, 34%)

CMYK

cmyk(26%, 5%, 0%, 66%)

Oklch

oklch(42.8% 0.024 211.9)

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

#A6491B

Tangerine · Sienna · Amber Brown

HEX

#A6491B

RGB

rgb(166, 73, 27)

HSL

hsl(20, 72%, 38%)

HSB

hsb(20, 84%, 65%)

CMYK

cmyk(0%, 56%, 84%, 35%)

Oklch

oklch(51.9% 0.135 43.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57214A

22592F

Analogous

4A2259

57214A

592230

Triadic

57214A

4C5922

224C59

Split-Comp.

57214A

305922

22594A

Tetradic

57214A

594A22

22592F

223059

Contrast Matrix WCAG 2.1 Contrast

57214A	7A0F36	A80C30	405357	A6491B
—	1.1 Fail	1.6 Fail	1.5 Fail	2.1 Fail
1.1 Fail	—	1.4 Fail	1.3 Fail	1.8 Fail
1.6 Fail	1.4 Fail	—	1.1 Fail	1.3 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.4 Fail
2.1 Fail	1.8 Fail	1.3 Fail	1.4 Fail	—

White BG

12.2AAA

10.8AAA

7.6AAA

8.1AAA

5.8AA

Black BG

1.7Fail

1.9Fail

2.8Fail

2.6Fail

3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

403F40

4C4B2D

646327

484856

7E7D26

Deuteranopia

43473E

525A2A

6E7925

474656

838A29

Tritanopia

543837

752523

A0201F

415555

A12F31

Achromatopsia

363636

333333

3F3F3F

4E4E4E

606060

Shades & Tints Shades & Tints

#57214A

Dark

Light

#7A0F36

Dark

Light

#A80C30

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57214a;
  --color-2: #7a0f36;
  --color-3: #a80c30;
  --color-4: #405357;
  --color-5: #a6491b;
}

SCSS

$color-1: #57214a;
$color-2: #7a0f36;
$color-3: #a80c30;
$color-4: #405357;
$color-5: #a6491b;

TAILWIND

colors: {
  'brand-1': '#57214a',
  'brand-2': '#7a0f36',
  'brand-3': '#a80c30',
  'brand-4': '#405357',
  'brand-5': '#a6491b',
}

RGB Array

[87, 33, 74], [122, 15, 54], [168, 12, 48], [64, 83, 87], [166, 73, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #57214A, #7A0F36, #A80C30, #405357, #A6491B 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: #57214a; --color-2: #7a0f36; --color-3: #a80c30; --color-4: #405357; --color-5: #a6491b. 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