← Back to Editor

#8E1A61 · #9C5076 · #CA823A · #E1A243 · #D8B387

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8E1A61

Rose Purple · Purple · Camellia

HEX
#8E1A61
RGB
rgb(142, 26, 97)
HSL
hsl(323, 69%, 33%)
HSB
hsb(323, 82%, 56%)
CMYK
cmyk(0%, 82%, 32%, 44%)
Oklch
oklch(44.1% 0.164 348.8)

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

#9C5076

Dark Violet · Gray · Camellia

HEX
#9C5076
RGB
rgb(156, 80, 118)
HSL
hsl(330, 32%, 46%)
HSB
hsb(330, 49%, 61%)
CMYK
cmyk(0%, 49%, 24%, 39%)
Oklch
oklch(53.5% 0.111 350.2)

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

#CA823A

Ginger · Chocolate · Warm Sun

HEX
#CA823A
RGB
rgb(202, 130, 58)
HSL
hsl(30, 58%, 51%)
HSB
hsb(30, 71%, 79%)
CMYK
cmyk(0%, 36%, 71%, 21%)
Oklch
oklch(66.9% 0.124 62.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#E1A243

Ginger · SandyBrown · Warm Sun

HEX
#E1A243
RGB
rgb(225, 162, 67)
HSL
hsl(36, 72%, 57%)
HSB
hsb(36, 70%, 88%)
CMYK
cmyk(0%, 28%, 70%, 12%)
Oklch
oklch(75.6% 0.132 74.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#D8B387

Ginger · BurlyWood · Warm Sun

HEX
#D8B387
RGB
rgb(216, 179, 135)
HSL
hsl(33, 51%, 69%)
HSB
hsb(33, 38%, 85%)
CMYK
cmyk(0%, 17%, 38%, 15%)
Oklch
oklch(78.9% 0.073 71.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8E1A61
1A8E47

Analogous

811A8E
8E1A61
8E1A28

Triadic

8E1A61
628E1A
1A628E

Split-Comp.

8E1A61
288E1A
1A8E81

Tetradic

8E1A61
8E811A
1A8E47
1A288E

Contrast Matrix WCAG 2.1 Contrast

8E1A61
9C5076
CA823A
E1A243
D8B387
—
1.5
Fail
2.7
Fail
3.8
AA Large
4.3
AA Large
1.5
Fail
—
1.8
Fail
2.5
Fail
2.8
Fail
2.7
Fail
1.8
Fail
—
1.4
Fail
1.6
Fail
3.8
AA Large
2.5
Fail
1.4
Fail
—
1.1
Fail
4.3
AA Large
2.8
Fail
1.6
Fail
1.1
Fail
—
White BG
8.5AAA
5.5AA
3.1AA Large
2.2Fail
2.0Fail
Black BG
2.5Fail
3.8AA Large
6.8AA
9.5AAA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5B50
7B7A6D
ABAA4B
C6C55A
C8C892

Deuteranopia

636B4C
80856B
AFB450
C9CE60
CACD94

Tritanopia

88423F
986664
C6595C
DE6C70
D69A9C

Achromatopsia

454545
6B6B6B
8F8F8F
AAAAAA
B9B9B9

Shades & Tints Shades & Tints

#8E1A61

Dark
Light

#9C5076

Dark
Light

#CA823A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8e1a61;
  --color-2: #9c5076;
  --color-3: #ca823a;
  --color-4: #e1a243;
  --color-5: #d8b387;
}

SCSS

$color-1: #8e1a61;
$color-2: #9c5076;
$color-3: #ca823a;
$color-4: #e1a243;
$color-5: #d8b387;

TAILWIND

colors: {
  'brand-1': '#8e1a61',
  'brand-2': '#9c5076',
  'brand-3': '#ca823a',
  'brand-4': '#e1a243',
  'brand-5': '#d8b387',
}

RGB Array

[142, 26, 97], [156, 80, 118], [202, 130, 58], [225, 162, 67], [216, 179, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8E1A61, #9C5076, #CA823A, #E1A243, #D8B387 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: #8e1a61; --color-2: #9c5076; --color-3: #ca823a; --color-4: #e1a243; --color-5: #d8b387. 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