#321745 + #85305C + #BA4343 + #C76122 + #C78824 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#321745

Dark Plum · MidnightBlue · Dark Purple

HEX

#321745

RGB

rgb(50, 23, 69)

HSL

hsl(275, 50%, 18%)

HSB

hsb(275, 67%, 27%)

CMYK

cmyk(28%, 67%, 0%, 73%)

Oklch

oklch(26.8% 0.086 308.8)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#85305C

Rose Purple · Brown · Camellia

HEX

#85305C

RGB

rgb(133, 48, 92)

HSL

hsl(329, 47%, 35%)

HSB

hsb(329, 64%, 52%)

CMYK

cmyk(0%, 64%, 31%, 48%)

Oklch

oklch(44.5% 0.126 351.3)

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

#BA4343

Crimson · Sienna · Passion Red

HEX

#BA4343

RGB

rgb(186, 67, 67)

HSL

hsl(0, 47%, 50%)

HSB

hsb(0, 64%, 73%)

CMYK

cmyk(0%, 64%, 64%, 27%)

Oklch

oklch(54.8% 0.154 23.7)

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

#C76122

Tangerine · Chocolate · Amber Brown

HEX

#C76122

RGB

rgb(199, 97, 34)

HSL

hsl(23, 71%, 46%)

HSB

hsb(23, 83%, 78%)

CMYK

cmyk(0%, 51%, 83%, 22%)

Oklch

oklch(60.6% 0.149 47.9)

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

#C78824

Ochre · DarkGoldenRod · Amber Brown

HEX

#C78824

RGB

rgb(199, 136, 36)

HSL

hsl(37, 69%, 46%)

HSB

hsb(37, 82%, 78%)

CMYK

cmyk(0%, 32%, 82%, 22%)

Oklch

oklch(67.4% 0.132 73.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

321745

2A4517

Analogous

1B1745

321745

451741

Triadic

321745

453217

174532

Split-Comp.

321745

414517

17451B

Tetradic

321745

451B17

2A4517

174145

Contrast Matrix WCAG 2.1 Contrast

321745	85305C	BA4343	C76122	C78824
—	1.9 Fail	3.0 Fail	3.8 AA Large	5.2 AA
1.9 Fail	—	1.5 Fail	2.0 Fail	2.7 Fail
3.0 Fail	1.5 Fail	—	1.3 Fail	1.8 Fail
3.8 AA Large	2.0 Fail	1.3 Fail	—	1.4 Fail
5.2 AA	2.7 Fail	1.8 Fail	1.4 Fail	—

White BG

15.6AAA

8.2AAA

5.3AA

4.1AA Large

3.0AA Large

Black BG

1.3Fail

2.6Fail

4.0AA Large

5.2AA

7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

26263A

605F51

868543

9B9A31

ACAB3C

Deuteranopia

282A37

656C4F

8D9643

A1A835

AFB442

Tritanopia

31312F

814947

B44343

C23D40

C44F54

Achromatopsia

242424

4E4E4E

676767

787878

8F8F8F

Shades & Tints Shades & Tints

#321745

Dark

Light

#85305C

Dark

Light

#BA4343

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #321745;
  --color-2: #85305c;
  --color-3: #ba4343;
  --color-4: #c76122;
  --color-5: #c78824;
}

SCSS

$color-1: #321745;
$color-2: #85305c;
$color-3: #ba4343;
$color-4: #c76122;
$color-5: #c78824;

TAILWIND

colors: {
  'brand-1': '#321745',
  'brand-2': '#85305c',
  'brand-3': '#ba4343',
  'brand-4': '#c76122',
  'brand-5': '#c78824',
}

RGB Array

[50, 23, 69], [133, 48, 92], [186, 67, 67], [199, 97, 34], [199, 136, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #321745, #85305C, #BA4343, #C76122, #C78824 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: #321745; --color-2: #85305c; --color-3: #ba4343; --color-4: #c76122; --color-5: #c78824. 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