← Back to Editor

#F11943 · #3D3F41 · #3A6F97 · #C0CFD0

dark

A 4-color dark 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

#F11943

Vermilion · Crimson · Passion Red

HEX
#F11943
RGB
rgb(241, 25, 67)
HSL
hsl(348, 89%, 52%)
HSB
hsb(348, 90%, 95%)
CMYK
cmyk(0%, 90%, 72%, 5%)
Oklch
oklch(61.3% 0.237 20.1)

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

#3D3F41

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3D3F41
RGB
rgb(61, 63, 65)
HSL
hsl(210, 3%, 25%)
HSB
hsb(210, 6%, 25%)
CMYK
cmyk(6%, 3%, 0%, 75%)
Oklch
oklch(36.6% 0.004 247.9)

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

#3A6F97

Slate Blue · SteelBlue · Navy Blue

HEX
#3A6F97
RGB
rgb(58, 111, 151)
HSL
hsl(206, 44%, 41%)
HSB
hsb(206, 62%, 59%)
CMYK
cmyk(62%, 26%, 0%, 41%)
Oklch
oklch(52.3% 0.085 243.2)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#C0CFD0

Sky Blue · LightGray · Glacier Blue

HEX
#C0CFD0
RGB
rgb(192, 207, 208)
HSL
hsl(184, 15%, 78%)
HSB
hsb(184, 8%, 82%)
CMYK
cmyk(8%, 0%, 0%, 18%)
Oklch
oklch(84.3% 0.016 201.7)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F11943
18F2C6

Analogous

F218B0
F11943
F25918

Triadic

F11943
43F218
1843F2

Split-Comp.

F11943
18F259
18B0F2

Tetradic

F11943
B0F218
18F2C6
5918F2

Contrast Matrix WCAG 2.1 Contrast

F11943
3D3F41
3A6F97
C0CFD0
—
2.5
Fail
1.3
Fail
2.6
Fail
2.5
Fail
—
2.0
Fail
6.6
AA
1.3
Fail
2.0
Fail
—
3.4
AA Large
2.6
Fail
6.6
AA
3.4
AA Large
—
White BG
4.2AA Large
10.6AAA
5.4AA
1.6Fail
Black BG
5.0AA
2.0Fail
3.9AA Large
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

939239
3E3E41
51518D
C6C7D0

Deuteranopia

A0B036
3E3E40
4E4A8B
C6C4D0

Tritanopia

E6312F
3D4040
3D8684
C1D0D0

Achromatopsia

5E5E5E
3F3F3F
646464
CBCBCB

Shades & Tints Shades & Tints

#F11943

Dark
Light

#3D3F41

Dark
Light

#3A6F97

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f11943;
  --color-2: #3d3f41;
  --color-3: #3a6f97;
  --color-4: #c0cfd0;
}

SCSS

$color-1: #f11943;
$color-2: #3d3f41;
$color-3: #3a6f97;
$color-4: #c0cfd0;

TAILWIND

colors: {
  'brand-1': '#f11943',
  'brand-2': '#3d3f41',
  'brand-3': '#3a6f97',
  'brand-4': '#c0cfd0',
}

RGB Array

[241, 25, 67], [61, 63, 65], [58, 111, 151], [192, 207, 208]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This dark-style palette of #F11943, #3D3F41, #3A6F97, #C0CFD0 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f11943; --color-2: #3d3f41; --color-3: #3a6f97; --color-4: #c0cfd0. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 dark-style 4-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