← Back to Editor

#281F0D · #4F211E · #5B3139 · #703D5B · #8C4B97

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#281F0D

Ochre · Black · Amber Gold

HEX
#281F0D
RGB
rgb(40, 31, 13)
HSL
hsl(40, 51%, 10%)
HSB
hsb(40, 68%, 16%)
CMYK
cmyk(0%, 22%, 67%, 84%)
Oklch
oklch(24.5% 0.033 83.4)

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

#4F211E

Crimson · Maroon · Wine Red

HEX
#4F211E
RGB
rgb(79, 33, 30)
HSL
hsl(4, 45%, 21%)
HSB
hsb(4, 62%, 31%)
CMYK
cmyk(0%, 58%, 62%, 69%)
Oklch
oklch(31.3% 0.070 25.7)

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

#5B3139

Crimson · DarkSlateGray · Wine Red

HEX
#5B3139
RGB
rgb(91, 49, 57)
HSL
hsl(349, 30%, 27%)
HSB
hsb(349, 46%, 36%)
CMYK
cmyk(0%, 46%, 37%, 64%)
Oklch
oklch(36.9% 0.062 8.3)

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

#703D5B

Rose Purple · DimGray · Camellia

HEX
#703D5B
RGB
rgb(112, 61, 91)
HSL
hsl(325, 29%, 34%)
HSB
hsb(325, 46%, 44%)
CMYK
cmyk(0%, 46%, 19%, 56%)
Oklch
oklch(43.3% 0.082 344.8)

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

#8C4B97

Dark Plum · Gray · Violet

HEX
#8C4B97
RGB
rgb(140, 75, 151)
HSL
hsl(291, 34%, 44%)
HSB
hsb(291, 50%, 59%)
CMYK
cmyk(7%, 50%, 0%, 41%)
Oklch
oklch(52.1% 0.135 321.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

281F0D
0C1527

Analogous

27110C
281F0D
22270C

Triadic

281F0D
0C271E
1E0C27

Split-Comp.

281F0D
0C2227
110C27

Tetradic

281F0D
0C2711
0C1527
270C22

Contrast Matrix WCAG 2.1 Contrast

281F0D
4F211E
5B3139
703D5B
8C4B97
—
1.2
Fail
1.5
Fail
1.9
Fail
2.8
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
2.3
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
1.8
Fail
1.9
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
2.8
Fail
2.3
Fail
1.8
Fail
1.4
Fail
—
White BG
16.3AAA
13.4AAA
10.8AAA
8.4AAA
5.9AA
Black BG
1.3Fail
1.6Fail
1.9Fail
2.5Fail
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

242411
3B3B1F
494837
5A5954
706F85

Deuteranopia

252512
3E411F
4B4E37
5D6152
747980

Tritanopia

281516
4D1F1F
593635
6D4E4D
897673

Achromatopsia

202020
2E2E2E
3E3E3E
505050
676767

Shades & Tints Shades & Tints

#281F0D

Dark
Light

#4F211E

Dark
Light

#5B3139

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #281f0d;
  --color-2: #4f211e;
  --color-3: #5b3139;
  --color-4: #703d5b;
  --color-5: #8c4b97;
}

SCSS

$color-1: #281f0d;
$color-2: #4f211e;
$color-3: #5b3139;
$color-4: #703d5b;
$color-5: #8c4b97;

TAILWIND

colors: {
  'brand-1': '#281f0d',
  'brand-2': '#4f211e',
  'brand-3': '#5b3139',
  'brand-4': '#703d5b',
  'brand-5': '#8c4b97',
}

RGB Array

[40, 31, 13], [79, 33, 30], [91, 49, 57], [112, 61, 91], [140, 75, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #281F0D, #4F211E, #5B3139, #703D5B, #8C4B97 is ideal for: tech websites, dark mode UIs, game UIs. 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: #281f0d; --color-2: #4f211e; --color-3: #5b3139; --color-4: #703d5b; --color-5: #8c4b97. 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. 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