#FA4415 + #D7351C + #374138 + #75735E + #3C301A · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FA4415

Vermilion · OrangeRed · Passion Red

HEX

#FA4415

RGB

rgb(250, 68, 21)

HSL

hsl(12, 96%, 53%)

HSB

hsb(12, 92%, 98%)

CMYK

cmyk(0%, 73%, 92%, 2%)

Oklch

oklch(65.1% 0.224 34.1)

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

#D7351C

Vermilion · FireBrick · Passion Red

HEX

#D7351C

RGB

rgb(215, 53, 28)

HSL

hsl(8, 77%, 48%)

HSB

hsb(8, 87%, 84%)

CMYK

cmyk(0%, 75%, 87%, 16%)

Oklch

oklch(57.8% 0.202 31.7)

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

#374138

Celadon · DarkSlateGray · Dark Stone

HEX

#374138

RGB

rgb(55, 65, 56)

HSL

hsl(126, 8%, 24%)

HSB

hsb(126, 15%, 25%)

CMYK

cmyk(15%, 0%, 14%, 75%)

Oklch

oklch(36.3% 0.020 148.0)

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

#75735E

Autumn Sage · DimGray · Honey Gold

HEX

#75735E

RGB

rgb(117, 115, 94)

HSL

hsl(55, 11%, 41%)

HSB

hsb(55, 20%, 46%)

CMYK

cmyk(0%, 2%, 20%, 54%)

Oklch

oklch(55.1% 0.031 102.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#3C301A

Ochre · DarkSlateGray · Cinnamon

HEX

#3C301A

RGB

rgb(60, 48, 26)

HSL

hsl(39, 40%, 17%)

HSB

hsb(39, 57%, 24%)

CMYK

cmyk(0%, 20%, 57%, 76%)

Oklch

oklch(31.7% 0.039 81.7)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA4415

14CCFA

Analogous

FA1459

FA4415

FAB514

Triadic

FA4415

14FA42

4214FA

Split-Comp.

FA4415

14FAB5

1459FA

Tetradic

FA4415

59FA14

14CCFA

B514FA

Contrast Matrix WCAG 2.1 Contrast

FA4415	D7351C	374138	75735E	3C301A
—	1.3 Fail	3.0 Fail	1.4 Fail	3.6 AA Large
1.3 Fail	—	2.2 Fail	1.0 Fail	2.7 Fail
3.0 Fail	2.2 Fail	—	2.2 Fail	1.2 Fail
1.4 Fail	1.0 Fail	2.2 Fail	—	2.7 Fail
3.6 AA Large	2.7 Fail	1.2 Fail	2.7 Fail	—

White BG

3.6AA Large

4.8AA

10.6AAA

4.8AA

12.9AAA

Black BG

5.9AA

4.4AA Large

2.0Fail

4.4AA Large

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAA20

918F22

3B3B3A

747463

37371F

Deuteranopia

B6C323

9AA624

3B3A3B

747464

383821

Tritanopia

F1292B

CF2728

383C3C

756768

3B2424

Achromatopsia

757575

636363

3D3D3D

717171

313131

Shades & Tints Shades & Tints

#FA4415

Dark

Light

#D7351C

Dark

Light

#374138

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa4415;
  --color-2: #d7351c;
  --color-3: #374138;
  --color-4: #75735e;
  --color-5: #3c301a;
}

SCSS

$color-1: #fa4415;
$color-2: #d7351c;
$color-3: #374138;
$color-4: #75735e;
$color-5: #3c301a;

TAILWIND

colors: {
  'brand-1': '#fa4415',
  'brand-2': '#d7351c',
  'brand-3': '#374138',
  'brand-4': '#75735e',
  'brand-5': '#3c301a',
}

RGB Array

[250, 68, 21], [215, 53, 28], [55, 65, 56], [117, 115, 94], [60, 48, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #FA4415, #D7351C, #374138, #75735E, #3C301A is ideal for: tech websites, dark mode UIs, game UIs. 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: #fa4415; --color-2: #d7351c; --color-3: #374138; --color-4: #75735e; --color-5: #3c301a. 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 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