← Back to Editor

#8B875D · #004BFC · #6C5062 · #0838D3 · #716384

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

#8B875D

Autumn Sage · Gray · Honey Gold

HEX
#8B875D
RGB
rgb(139, 135, 93)
HSL
hsl(55, 20%, 45%)
HSB
hsb(55, 33%, 55%)
CMYK
cmyk(0%, 3%, 33%, 45%)
Oklch
oklch(61.6% 0.059 103.4)

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

#004BFC

Indigo · Blue · Navy Blue

HEX
#004BFC
RGB
rgb(0, 75, 252)
HSL
hsl(222, 100%, 49%)
HSB
hsb(222, 100%, 99%)
CMYK
cmyk(100%, 70%, 0%, 1%)
Oklch
oklch(51.4% 0.267 263.3)

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

#6C5062

Rose Purple · DimGray · Camellia

HEX
#6C5062
RGB
rgb(108, 80, 98)
HSL
hsl(321, 15%, 37%)
HSB
hsb(321, 26%, 42%)
CMYK
cmyk(0%, 26%, 9%, 58%)
Oklch
oklch(46.7% 0.046 340.3)

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

#0838D3

Indigo · MediumBlue · Navy Blue

HEX
#0838D3
RGB
rgb(8, 56, 211)
HSL
hsl(226, 93%, 43%)
HSB
hsb(226, 96%, 83%)
CMYK
cmyk(96%, 73%, 0%, 17%)
Oklch
oklch(44.2% 0.238 264.2)

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

#716384

Deep Indigo · DimGray · Violet

HEX
#716384
RGB
rgb(113, 99, 132)
HSL
hsl(265, 14%, 45%)
HSB
hsb(265, 25%, 52%)
CMYK
cmyk(14%, 25%, 0%, 48%)
Oklch
oklch(52.5% 0.054 304.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8B875D
5C608A

Analogous

8A6F5C
8B875D
778A5C

Triadic

8B875D
5C8A86
865C8A

Split-Comp.

8B875D
5C778A
6F5C8A

Tetradic

8B875D
5C8A6F
5C608A
8A5C77

Contrast Matrix WCAG 2.1 Contrast

8B875D
004BFC
6C5062
0838D3
716384
—
1.7
Fail
1.9
Fail
2.3
Fail
1.5
Fail
1.7
Fail
—
1.2
Fail
1.4
Fail
1.1
Fail
1.9
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
2.3
Fail
1.4
Fail
1.2
Fail
—
1.5
Fail
1.5
Fail
1.1
Fail
1.3
Fail
1.5
Fail
—
White BG
3.7AA Large
6.2AA
7.1AAA
8.3AAA
5.5AA
Black BG
5.7AA
3.4AA Large
3.0Fail
2.5Fail
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

898967
2021D1
60605E
1D1DAD
6B6B7C

Deuteranopia

8A8A6A
1C17C7
62645D
1A16A5
6C6D7A

Tritanopia

8B6F71
04AFA8
6B5A59
0A9089
707674

Achromatopsia

838383
494949
5A5A5A
3B3B3B
6B6B6B

Shades & Tints Shades & Tints

#8B875D

Dark
Light

#004BFC

Dark
Light

#6C5062

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8b875d;
  --color-2: #004bfc;
  --color-3: #6c5062;
  --color-4: #0838d3;
  --color-5: #716384;
}

SCSS

$color-1: #8b875d;
$color-2: #004bfc;
$color-3: #6c5062;
$color-4: #0838d3;
$color-5: #716384;

TAILWIND

colors: {
  'brand-1': '#8b875d',
  'brand-2': '#004bfc',
  'brand-3': '#6c5062',
  'brand-4': '#0838d3',
  'brand-5': '#716384',
}

RGB Array

[139, 135, 93], [0, 75, 252], [108, 80, 98], [8, 56, 211], [113, 99, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8B875D, #004BFC, #6C5062, #0838D3, #716384 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: #8b875d; --color-2: #004bfc; --color-3: #6c5062; --color-4: #0838d3; --color-5: #716384. 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