← Back to Editor

#101421 · #450140 · #552B40 · #B9575E · #B9CAA1

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

#101421

Indigo · Black · Deep Sea Blue

HEX
#101421
RGB
rgb(16, 20, 33)
HSL
hsl(226, 35%, 10%)
HSB
hsb(226, 52%, 13%)
CMYK
cmyk(52%, 39%, 0%, 87%)
Oklch
oklch(19.4% 0.027 270.6)

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

#450140

Rose Purple · MidnightBlue · Dark Purple

HEX
#450140
RGB
rgb(69, 1, 64)
HSL
hsl(304, 97%, 14%)
HSB
hsb(304, 99%, 27%)
CMYK
cmyk(0%, 99%, 7%, 73%)
Oklch
oklch(27.1% 0.121 331.9)

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

#552B40

Dark Violet · DarkSlateGray · Raspberry

HEX
#552B40
RGB
rgb(85, 43, 64)
HSL
hsl(330, 33%, 25%)
HSB
hsb(330, 49%, 33%)
CMYK
cmyk(0%, 49%, 25%, 67%)
Oklch
oklch(35.2% 0.068 349.9)

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

#B9575E

Crimson · Sienna · Passion Red

HEX
#B9575E
RGB
rgb(185, 87, 94)
HSL
hsl(356, 41%, 53%)
HSB
hsb(356, 53%, 73%)
CMYK
cmyk(0%, 53%, 49%, 27%)
Oklch
oklch(58.0% 0.127 17.5)

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

#B9CAA1

Willow Green · Silver · Apple Green

HEX
#B9CAA1
RGB
rgb(185, 202, 161)
HSL
hsl(85, 28%, 71%)
HSB
hsb(85, 20%, 79%)
CMYK
cmyk(8%, 0%, 20%, 21%)
Oklch
oklch(81.5% 0.059 126.0)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

101421
221E11

Analogous

111E22
101421
151122

Triadic

101421
221115
152211

Split-Comp.

101421
221511
1E2211

Tetradic

101421
22111E
221E11
112215

Contrast Matrix WCAG 2.1 Contrast

101421
450140
552B40
B9575E
B9CAA1
—
1.2
Fail
1.6
Fail
4.0
AA Large
10.5
AAA
1.2
Fail
—
1.4
Fail
3.4
AA Large
9.0
AAA
1.6
Fail
1.4
Fail
—
2.5
Fail
6.7
AA
4.0
AA Large
3.4
AA Large
2.5
Fail
—
2.6
Fail
10.5
AAA
9.0
AAA
6.7
AA
2.6
Fail
—
White BG
18.4AAA
15.8AAA
11.6AAA
4.6AA
1.7Fail
Black BG
1.1Fail
1.3Fail
1.8Fail
4.6AA
12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

12121E
282731
43423B
8F8E5C
C0C1AB

Deuteranopia

12111D
2C312D
45483A
949C5C
BFBEAD

Tritanopia

101B1B
422522
533736
B45B5B
BAB3B4

Achromatopsia

141414
1D1D1D
3A3A3A
757575
C0C0C0

Shades & Tints Shades & Tints

#101421

Dark
Light

#450140

Dark
Light

#552B40

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #101421;
  --color-2: #450140;
  --color-3: #552b40;
  --color-4: #b9575e;
  --color-5: #b9caa1;
}

SCSS

$color-1: #101421;
$color-2: #450140;
$color-3: #552b40;
$color-4: #b9575e;
$color-5: #b9caa1;

TAILWIND

colors: {
  'brand-1': '#101421',
  'brand-2': '#450140',
  'brand-3': '#552b40',
  'brand-4': '#b9575e',
  'brand-5': '#b9caa1',
}

RGB Array

[16, 20, 33], [69, 1, 64], [85, 43, 64], [185, 87, 94], [185, 202, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #101421, #450140, #552B40, #B9575E, #B9CAA1 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: #101421; --color-2: #450140; --color-3: #552b40; --color-4: #b9575e; --color-5: #b9caa1. 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