← Back to Editor

#466585 · #CC8D29 · #A6806F · #9E6F8F · #886596

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

#466585

Indigo · DarkSlateBlue · Prussian Blue

HEX
#466585
RGB
rgb(70, 101, 133)
HSL
hsl(210, 31%, 40%)
HSB
hsb(210, 47%, 52%)
CMYK
cmyk(47%, 24%, 0%, 48%)
Oklch
oklch(49.6% 0.063 250.0)

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

#CC8D29

Ochre · GoldenRod · Amber Brown

HEX
#CC8D29
RGB
rgb(204, 141, 41)
HSL
hsl(37, 67%, 48%)
HSB
hsb(37, 80%, 80%)
CMYK
cmyk(0%, 31%, 80%, 20%)
Oklch
oklch(69.0% 0.133 73.6)

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

#A6806F

Tangerine · Gray · Warm Sun

HEX
#A6806F
RGB
rgb(166, 128, 111)
HSL
hsl(19, 24%, 54%)
HSB
hsb(19, 33%, 65%)
CMYK
cmyk(0%, 23%, 33%, 35%)
Oklch
oklch(63.2% 0.054 45.3)

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

#9E6F8F

Rose Purple · Gray · Violet

HEX
#9E6F8F
RGB
rgb(158, 111, 143)
HSL
hsl(319, 20%, 53%)
HSB
hsb(319, 30%, 62%)
CMYK
cmyk(0%, 30%, 9%, 38%)
Oklch
oklch(60.0% 0.074 338.9)

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

#886596

Dark Plum · Gray · Violet

HEX
#886596
RGB
rgb(136, 101, 150)
HSL
hsl(283, 20%, 49%)
HSB
hsb(283, 33%, 59%)
CMYK
cmyk(9%, 33%, 0%, 41%)
Oklch
oklch(56.0% 0.084 316.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

466585
866646

Analogous

468686
466585
464686

Triadic

466585
864666
668646

Split-Comp.

466585
864646
868646

Tetradic

466585
864686
866646
468646

Contrast Matrix WCAG 2.1 Contrast

466585
CC8D29
A6806F
9E6F8F
886596
—
2.1
Fail
1.7
Fail
1.5
Fail
1.3
Fail
2.1
Fail
—
1.2
Fail
1.4
Fail
1.7
Fail
1.7
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.5
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.7
Fail
1.4
Fail
1.2
Fail
—
White BG
6.1AA
2.8Fail
3.5AA Large
4.1AA Large
4.8AA
Black BG
3.5AA Large
7.4AAA
5.9AA
5.1AA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

53547D
B1B041
969573
8A8987
79798A

Deuteranopia

524F7B
B4B947
989B74
8C9085
7B7D87

Tritanopia

487776
C95459
A47677
9C8180
86817F

Achromatopsia

5F5F5F
949494
898989
818181
757575

Shades & Tints Shades & Tints

#466585

Dark
Light

#CC8D29

Dark
Light

#A6806F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #466585;
  --color-2: #cc8d29;
  --color-3: #a6806f;
  --color-4: #9e6f8f;
  --color-5: #886596;
}

SCSS

$color-1: #466585;
$color-2: #cc8d29;
$color-3: #a6806f;
$color-4: #9e6f8f;
$color-5: #886596;

TAILWIND

colors: {
  'brand-1': '#466585',
  'brand-2': '#cc8d29',
  'brand-3': '#a6806f',
  'brand-4': '#9e6f8f',
  'brand-5': '#886596',
}

RGB Array

[70, 101, 133], [204, 141, 41], [166, 128, 111], [158, 111, 143], [136, 101, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #466585, #CC8D29, #A6806F, #9E6F8F, #886596 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: #466585; --color-2: #cc8d29; --color-3: #a6806f; --color-4: #9e6f8f; --color-5: #886596. 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