← Back to Editor

#FC122A · #C1362A · #45211D · #3C3116 · #16655D

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#FC122A

Vermilion · Crimson · Passion Red

HEX
#FC122A
RGB
rgb(252, 18, 42)
HSL
hsl(354, 98%, 53%)
HSB
hsb(354, 93%, 99%)
CMYK
cmyk(0%, 93%, 83%, 1%)
Oklch
oklch(62.8% 0.250 25.7)

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

#C1362A

Vermilion · FireBrick · Passion Red

HEX
#C1362A
RGB
rgb(193, 54, 42)
HSL
hsl(5, 64%, 46%)
HSB
hsb(5, 78%, 76%)
CMYK
cmyk(0%, 72%, 78%, 24%)
Oklch
oklch(54.2% 0.178 29.2)

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

#45211D

Crimson · DarkSlateGray · Deep Berry

HEX
#45211D
RGB
rgb(69, 33, 29)
HSL
hsl(6, 41%, 19%)
HSB
hsb(6, 58%, 27%)
CMYK
cmyk(0%, 52%, 58%, 73%)
Oklch
oklch(29.6% 0.056 27.6)

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

#3C3116

Ochre · DarkSlateGray · Amber Gold

HEX
#3C3116
RGB
rgb(60, 49, 22)
HSL
hsl(43, 46%, 16%)
HSB
hsb(43, 63%, 24%)
CMYK
cmyk(0%, 18%, 63%, 76%)
Oklch
oklch(31.8% 0.045 87.6)

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

#16655D

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#16655D
RGB
rgb(22, 101, 93)
HSL
hsl(174, 64%, 24%)
HSB
hsb(174, 78%, 40%)
CMYK
cmyk(78%, 0%, 8%, 60%)
Oklch
oklch(45.9% 0.074 184.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC122A
12FDE5

Analogous

FD129F
FC122A
FD7012

Triadic

FC122A
29FD12
1229FD

Split-Comp.

FC122A
12FD70
129FFD

Tetradic

FC122A
9FFD12
12FDE5
7012FD

Contrast Matrix WCAG 2.1 Contrast

FC122A
C1362A
45211D
3C3116
16655D
—
1.4
Fail
3.5
AA Large
3.2
AA Large
1.7
Fail
1.4
Fail
—
2.6
Fail
2.3
Fail
1.3
Fail
3.5
AA Large
2.6
Fail
—
1.1
Fail
2.1
Fail
3.2
AA Large
2.3
Fail
1.1
Fail
—
1.9
Fail
1.7
Fail
1.3
Fail
2.1
Fail
1.9
Fail
—
White BG
4.0AA Large
5.5AA
14.1AAA
12.8AAA
6.9AA
Black BG
5.3AA
3.8AA Large
1.5Fail
1.6Fail
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

979524
85842D
35351E
37371D
38395F

Deuteranopia

A4B623
8D972E
383A1E
38391E
342E5F

Tritanopia

F0201F
BA2F30
431F1F
3B2223
1A6061

Achromatopsia

5B5B5B
5E5E5E
2B2B2B
313131
4C4C4C

Shades & Tints Shades & Tints

#FC122A

Dark
Light

#C1362A

Dark
Light

#45211D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc122a;
  --color-2: #c1362a;
  --color-3: #45211d;
  --color-4: #3c3116;
  --color-5: #16655d;
}

SCSS

$color-1: #fc122a;
$color-2: #c1362a;
$color-3: #45211d;
$color-4: #3c3116;
$color-5: #16655d;

TAILWIND

colors: {
  'brand-1': '#fc122a',
  'brand-2': '#c1362a',
  'brand-3': '#45211d',
  'brand-4': '#3c3116',
  'brand-5': '#16655d',
}

RGB Array

[252, 18, 42], [193, 54, 42], [69, 33, 29], [60, 49, 22], [22, 101, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #FC122A, #C1362A, #45211D, #3C3116, #16655D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fc122a; --color-2: #c1362a; --color-3: #45211d; --color-4: #3c3116; --color-5: #16655d. 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 dark-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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