← Back to Editor

#4E0111 · #D9DADC · #F2256A · #0F0E0C · #2E2E2C

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

#4E0111

Vermilion · Maroon · Deep Berry

HEX
#4E0111
RGB
rgb(78, 1, 17)
HSL
hsl(348, 97%, 15%)
HSB
hsb(348, 99%, 31%)
CMYK
cmyk(0%, 99%, 78%, 69%)
Oklch
oklch(27.0% 0.107 18.1)

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

#D9DADC

Plain White · LightGray · Cloud White

HEX
#D9DADC
RGB
rgb(217, 218, 220)
HSL
hsl(220, 4%, 86%)
HSB
hsb(220, 1%, 86%)
CMYK
cmyk(1%, 1%, 0%, 14%)
Oklch
oklch(88.8% 0.003 264.5)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#F2256A

Dark Violet · DeepPink · Rose Pink

HEX
#F2256A
RGB
rgb(242, 37, 106)
HSL
hsl(340, 89%, 55%)
HSB
hsb(340, 85%, 95%)
CMYK
cmyk(0%, 85%, 56%, 5%)
Oklch
oklch(62.7% 0.234 9.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#0F0E0C

Ochre · Black · Amber Gold

HEX
#0F0E0C
RGB
rgb(15, 14, 12)
HSL
hsl(40, 11%, 5%)
HSB
hsb(40, 20%, 6%)
CMYK
cmyk(0%, 7%, 20%, 94%)
Oklch
oklch(16.4% 0.004 84.6)

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

#2E2E2C

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2E2E2C
RGB
rgb(46, 46, 44)
HSL
hsl(60, 2%, 18%)
HSB
hsb(60, 4%, 18%)
CMYK
cmyk(0%, 0%, 4%, 82%)
Oklch
oklch(30.0% 0.004 106.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4E0111
014B3D

Analogous

4B0135
4E0111
4B1701

Triadic

4E0111
104B01
01104B

Split-Comp.

4E0111
014B17
01354B

Tetradic

4E0111
354B01
014B3D
17014B

Contrast Matrix WCAG 2.1 Contrast

4E0111
D9DADC
F2256A
0F0E0C
2E2E2C
—
11.2
AAA
3.9
AA Large
1.2
Fail
1.2
Fail
11.2
AAA
—
2.9
Fail
13.8
AAA
9.7
AAA
3.9
AA Large
2.9
Fail
—
4.8
AA
3.4
AA Large
1.2
Fail
13.8
AAA
4.8
AA
—
1.4
Fail
1.2
Fail
9.7
AAA
3.4
AA Large
1.4
Fail
—
White BG
15.7AAA
1.4Fail
4.0AA Large
19.3AAA
13.6AAA
Black BG
1.3Fail
15.0AAA
5.2AA
1.1Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2C0D
D9D9DC
999759
0F0F0C
2E2E2C

Deuteranopia

31370C
D9D9DB
A5B455
0F0F0D
2E2E2D

Tritanopia

4A0A09
D9DBDB
E84C49
0F0D0D
2E2D2D

Achromatopsia

1A1A1A
DADADA
6A6A6A
0E0E0E
2E2E2E

Shades & Tints Shades & Tints

#4E0111

Dark
Light

#D9DADC

Dark
Light

#F2256A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4e0111;
  --color-2: #d9dadc;
  --color-3: #f2256a;
  --color-4: #0f0e0c;
  --color-5: #2e2e2c;
}

SCSS

$color-1: #4e0111;
$color-2: #d9dadc;
$color-3: #f2256a;
$color-4: #0f0e0c;
$color-5: #2e2e2c;

TAILWIND

colors: {
  'brand-1': '#4e0111',
  'brand-2': '#d9dadc',
  'brand-3': '#f2256a',
  'brand-4': '#0f0e0c',
  'brand-5': '#2e2e2c',
}

RGB Array

[78, 1, 17], [217, 218, 220], [242, 37, 106], [15, 14, 12], [46, 46, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4E0111, #D9DADC, #F2256A, #0F0E0C, #2E2E2C 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: #4e0111; --color-2: #d9dadc; --color-3: #f2256a; --color-4: #0f0e0c; --color-5: #2e2e2c. 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