← Back to Editor

#857D89 · #8427B3 · #030D30 · #917D3E · #F22237

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 LibraryData Visualization

Color Details Color Details

#857D89

Ash · Gray · Warm Gray

HEX
#857D89
RGB
rgb(133, 125, 137)
HSL
hsl(280, 5%, 51%)
HSB
hsb(280, 9%, 54%)
CMYK
cmyk(3%, 9%, 0%, 46%)
Oklch
oklch(60.1% 0.020 314.7)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#8427B3

Royal Purple · DarkOrchid · Violet

HEX
#8427B3
RGB
rgb(132, 39, 179)
HSL
hsl(280, 64%, 43%)
HSB
hsb(280, 78%, 70%)
CMYK
cmyk(26%, 78%, 0%, 30%)
Oklch
oklch(48.5% 0.209 311.0)

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

#030D30

Indigo · Black · Deep Sea Blue

HEX
#030D30
RGB
rgb(3, 13, 48)
HSL
hsl(227, 88%, 10%)
HSB
hsb(227, 94%, 19%)
CMYK
cmyk(94%, 73%, 0%, 81%)
Oklch
oklch(17.8% 0.072 264.8)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#917D3E

Ochre · Sienna · Honey Gold

HEX
#917D3E
RGB
rgb(145, 125, 62)
HSL
hsl(46, 40%, 41%)
HSB
hsb(46, 57%, 57%)
CMYK
cmyk(0%, 14%, 57%, 43%)
Oklch
oklch(59.5% 0.086 92.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#F22237

Vermilion · Crimson · Passion Red

HEX
#F22237
RGB
rgb(242, 34, 55)
HSL
hsl(354, 89%, 54%)
HSB
hsb(354, 86%, 95%)
CMYK
cmyk(0%, 86%, 77%, 5%)
Oklch
oklch(61.7% 0.235 23.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

857D89
80887C

Analogous

7E7C88
857D89
887C86

Triadic

857D89
88847C
7C8884

Split-Comp.

857D89
86887C
7C887E

Tetradic

857D89
887E7C
80887C
7C8688

Contrast Matrix WCAG 2.1 Contrast

857D89
8427B3
030D30
917D3E
F22237
—
1.8
Fail
4.8
AA
1.0
Fail
1.0
Fail
1.8
Fail
—
2.6
Fail
1.8
Fail
1.7
Fail
4.8
AA
2.6
Fail
—
4.7
AA
4.6
AA
1.0
Fail
1.8
Fail
4.7
AA
—
1.0
Fail
1.0
Fail
1.7
Fail
4.6
AA
1.0
Fail
—
White BG
4.0AA Large
7.2AAA
19.0AAA
4.0AA Large
4.2AA Large
Black BG
5.3AA
2.9Fail
1.1Fail
5.2AA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

828186
5C5B91
070728
88884D
989632

Deuteranopia

828385
616889
070625
8A8B51
A4B431

Tritanopia

858483
7F7671
03211F
90595C
E82E2D

Achromatopsia

818181
535353
0E0E0E
7C7C7C
636363

Shades & Tints Shades & Tints

#857D89

Dark
Light

#8427B3

Dark
Light

#030D30

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #857d89;
  --color-2: #8427b3;
  --color-3: #030d30;
  --color-4: #917d3e;
  --color-5: #f22237;
}

SCSS

$color-1: #857d89;
$color-2: #8427b3;
$color-3: #030d30;
$color-4: #917d3e;
$color-5: #f22237;

TAILWIND

colors: {
  'brand-1': '#857d89',
  'brand-2': '#8427b3',
  'brand-3': '#030d30',
  'brand-4': '#917d3e',
  'brand-5': '#f22237',
}

RGB Array

[133, 125, 137], [132, 39, 179], [3, 13, 48], [145, 125, 62], [242, 34, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #857D89, #8427B3, #030D30, #917D3E, #F22237 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #857d89; --color-2: #8427b3; --color-3: #030d30; --color-4: #917d3e; --color-5: #f22237. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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