← Back to Editor

#8B8966 · #B10C43 · #EC0202 · #705099 · #4965C2

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

#8B8966

Autumn Sage · Gray · Honey Gold

HEX
#8B8966
RGB
rgb(139, 137, 102)
HSL
hsl(57, 15%, 47%)
HSB
hsb(57, 27%, 55%)
CMYK
cmyk(0%, 1%, 27%, 45%)
Oklch
oklch(62.3% 0.050 105.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B10C43

Dark Violet · FireBrick · Camellia

HEX
#B10C43
RGB
rgb(177, 12, 67)
HSL
hsl(340, 87%, 37%)
HSB
hsb(340, 93%, 69%)
CMYK
cmyk(0%, 93%, 62%, 31%)
Oklch
oklch(48.9% 0.190 11.8)

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

#EC0202

Vermilion · Red · Passion Red

HEX
#EC0202
RGB
rgb(236, 2, 2)
HSL
hsl(0, 98%, 47%)
HSB
hsb(0, 99%, 93%)
CMYK
cmyk(0%, 99%, 99%, 7%)
Oklch
oklch(59.3% 0.243 29.2)

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

#705099

Deep Indigo · DarkSlateBlue · Violet

HEX
#705099
RGB
rgb(112, 80, 153)
HSL
hsl(266, 31%, 46%)
HSB
hsb(266, 48%, 60%)
CMYK
cmyk(27%, 48%, 0%, 40%)
Oklch
oklch(49.8% 0.117 302.6)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#4965C2

Azure · SteelBlue · Navy Blue

HEX
#4965C2
RGB
rgb(73, 101, 194)
HSL
hsl(226, 50%, 52%)
HSB
hsb(226, 62%, 76%)
CMYK
cmyk(62%, 48%, 0%, 24%)
Oklch
oklch(53.4% 0.149 268.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8B8966
66688A

Analogous

8A7666
8B8966
7A8A66

Triadic

8B8966
668A88
88668A

Split-Comp.

8B8966
667A8A
76668A

Tetradic

8B8966
668A76
66688A
8A667A

Contrast Matrix WCAG 2.1 Contrast

8B8966
B10C43
EC0202
705099
4965C2
—
2.0
Fail
1.3
Fail
1.8
Fail
1.5
Fail
2.0
Fail
—
1.5
Fail
1.1
Fail
1.3
Fail
1.3
Fail
1.5
Fail
—
1.4
Fail
1.2
Fail
1.8
Fail
1.1
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
1.3
Fail
1.2
Fail
1.2
Fail
—
White BG
3.6AA Large
7.0AA
4.6AA
6.4AA
5.4AA
Black BG
5.9AA
3.0AA Large
4.6AA
3.3AA Large
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8A6E
6A6836
878502
626287
5555AB

Deuteranopia

8A8A71
737F33
94A602
646683
5451A6

Tritanopia

8B7577
A92B29
E00202
6E7976
4A9A96

Achromatopsia

868686
444444
484848
626262
676767

Shades & Tints Shades & Tints

#8B8966

Dark
Light

#B10C43

Dark
Light

#EC0202

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8b8966;
  --color-2: #b10c43;
  --color-3: #ec0202;
  --color-4: #705099;
  --color-5: #4965c2;
}

SCSS

$color-1: #8b8966;
$color-2: #b10c43;
$color-3: #ec0202;
$color-4: #705099;
$color-5: #4965c2;

TAILWIND

colors: {
  'brand-1': '#8b8966',
  'brand-2': '#b10c43',
  'brand-3': '#ec0202',
  'brand-4': '#705099',
  'brand-5': '#4965c2',
}

RGB Array

[139, 137, 102], [177, 12, 67], [236, 2, 2], [112, 80, 153], [73, 101, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8B8966, #B10C43, #EC0202, #705099, #4965C2 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: #8b8966; --color-2: #b10c43; --color-3: #ec0202; --color-4: #705099; --color-5: #4965c2. 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