← Back to Editor

#4D0D0B · #5C1405 · #1C121A · #3FA870 · #D3EABE

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

Color Details Color Details

#4D0D0B

Vermilion · Maroon · Deep Berry

HEX
#4D0D0B
RGB
rgb(77, 13, 11)
HSL
hsl(2, 75%, 17%)
HSB
hsb(2, 86%, 30%)
CMYK
cmyk(0%, 83%, 86%, 70%)
Oklch
oklch(27.8% 0.095 27.3)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#5C1405

Vermilion · Maroon · Deep Berry

HEX
#5C1405
RGB
rgb(92, 20, 5)
HSL
hsl(10, 90%, 19%)
HSB
hsb(10, 95%, 36%)
CMYK
cmyk(0%, 78%, 95%, 64%)
Oklch
oklch(31.5% 0.107 33.5)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#1C121A

Rose Purple · Black · Dark Purple

HEX
#1C121A
RGB
rgb(28, 18, 26)
HSL
hsl(312, 22%, 9%)
HSB
hsb(312, 36%, 11%)
CMYK
cmyk(0%, 36%, 7%, 89%)
Oklch
oklch(19.9% 0.022 333.6)

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

#3FA870

Celadon · MediumSeaGreen · Olive Green

HEX
#3FA870
RGB
rgb(63, 168, 112)
HSL
hsl(148, 45%, 45%)
HSB
hsb(148, 63%, 66%)
CMYK
cmyk(63%, 0%, 33%, 34%)
Oklch
oklch(65.6% 0.128 156.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#D3EABE

Emerald · LightGray · Mint Green

HEX
#D3EABE
RGB
rgb(211, 234, 190)
HSL
hsl(91, 51%, 83%)
HSB
hsb(91, 19%, 92%)
CMYK
cmyk(10%, 0%, 19%, 8%)
Oklch
oklch(90.9% 0.063 130.1)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D0D0B
0B4A4C

Analogous

4C0B29
4D0D0B
4C2E0B

Triadic

4D0D0B
0B4C0D
0D0B4C

Split-Comp.

4D0D0B
0B4C2E
0B294C

Tetradic

4D0D0B
294C0B
0B4A4C
2E0B4C

Contrast Matrix WCAG 2.1 Contrast

4D0D0B
5C1405
1C121A
3FA870
D3EABE
—
1.1
Fail
1.2
Fail
5.1
AA
11.8
AAA
1.1
Fail
—
1.4
Fail
4.5
AA
10.5
AAA
1.2
Fail
1.4
Fail
—
6.1
AA
14.1
AAA
5.1
AA
4.5
AA
6.1
AA
—
2.3
Fail
11.8
AAA
10.5
AAA
14.1
AAA
2.3
Fail
—
White BG
15.2AAA
13.5AAA
18.2AAA
3.0Fail
1.3Fail
Black BG
1.4Fail
1.6Fail
1.2Fail
7.0AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

31310B
3D3C09
181818
6C6D7E
DDDDC9

Deuteranopia

353A0C
41460A
181918
665F81
DCDACB

Tritanopia

4A0C0C
580B0C
1B1716
44888B
D4D1D3

Achromatopsia

202020
282828
161616
828282
DEDEDE

Shades & Tints Shades & Tints

#4D0D0B

Dark
Light

#5C1405

Dark
Light

#1C121A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d0d0b;
  --color-2: #5c1405;
  --color-3: #1c121a;
  --color-4: #3fa870;
  --color-5: #d3eabe;
}

SCSS

$color-1: #4d0d0b;
$color-2: #5c1405;
$color-3: #1c121a;
$color-4: #3fa870;
$color-5: #d3eabe;

TAILWIND

colors: {
  'brand-1': '#4d0d0b',
  'brand-2': '#5c1405',
  'brand-3': '#1c121a',
  'brand-4': '#3fa870',
  'brand-5': '#d3eabe',
}

RGB Array

[77, 13, 11], [92, 20, 5], [28, 18, 26], [63, 168, 112], [211, 234, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D0D0B, #5C1405, #1C121A, #3FA870, #D3EABE 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: #4d0d0b; --color-2: #5c1405; --color-3: #1c121a; --color-4: #3fa870; --color-5: #d3eabe. 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