← Back to Editor

#F61E50 · #A6123D · #103F42 · #393733

A 4-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 Library

Color Details Color Details

#F61E50

Vermilion · Crimson · Passion Red

HEX
#F61E50
RGB
rgb(246, 30, 80)
HSL
hsl(346, 92%, 54%)
HSB
hsb(346, 88%, 96%)
CMYK
cmyk(0%, 88%, 67%, 4%)
Oklch
oklch(62.6% 0.239 17.2)

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

#A6123D

Dark Violet · Brown · Camellia

HEX
#A6123D
RGB
rgb(166, 18, 61)
HSL
hsl(343, 80%, 36%)
HSB
hsb(343, 89%, 65%)
CMYK
cmyk(0%, 89%, 63%, 35%)
Oklch
oklch(46.9% 0.178 13.0)

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

#103F42

Lake Blue · DarkSlateGray · Peacock Green

HEX
#103F42
RGB
rgb(16, 63, 66)
HSL
hsl(184, 61%, 16%)
HSB
hsb(184, 76%, 26%)
CMYK
cmyk(76%, 5%, 0%, 74%)
Oklch
oklch(33.8% 0.049 201.2)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#393733

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#393733
RGB
rgb(57, 55, 51)
HSL
hsl(40, 6%, 21%)
HSB
hsb(40, 11%, 22%)
CMYK
cmyk(0%, 4%, 11%, 78%)
Oklch
oklch(33.7% 0.007 84.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F61E50
1EF6C3

Analogous

F61EBC
F61E50
F6571E

Triadic

F61E50
50F61E
1E50F6

Split-Comp.

F61E50
1EF657
1EBCF6

Tetradic

F61E50
BCF61E
1EF6C3
571EF6

Contrast Matrix WCAG 2.1 Contrast

F61E50
A6123D
103F42
393733
—
1.9
Fail
2.9
Fail
3.0
Fail
1.9
Fail
—
1.5
Fail
1.6
Fail
2.9
Fail
1.5
Fail
—
1.0
Fail
3.0
Fail
1.6
Fail
1.0
Fail
—
White BG
4.0AA Large
7.6AAA
11.6AAA
11.9AAA
Black BG
5.2AA
2.8Fail
1.8Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

989744
666533
242541
383834

Deuteranopia

A5B541
6F7A30
221E41
383834

Tritanopia

EB3A38
9F2A29
124141
393535

Achromatopsia

646464
434343
313131
373737

Shades & Tints Shades & Tints

#F61E50

Dark
Light

#A6123D

Dark
Light

#103F42

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f61e50;
  --color-2: #a6123d;
  --color-3: #103f42;
  --color-4: #393733;
}

SCSS

$color-1: #f61e50;
$color-2: #a6123d;
$color-3: #103f42;
$color-4: #393733;

TAILWIND

colors: {
  'brand-1': '#f61e50',
  'brand-2': '#a6123d',
  'brand-3': '#103f42',
  'brand-4': '#393733',
}

RGB Array

[246, 30, 80], [166, 18, 61], [16, 63, 66], [57, 55, 51]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #F61E50, #A6123D, #103F42, #393733 is ideal for: tech websites, dark mode UIs, game UIs. 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: #f61e50; --color-2: #a6123d; --color-3: #103f42; --color-4: #393733. 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 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