#39404A + #653D46 + #803643 + #C4323D + #F4152A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#39404A

Indigo · DarkSlateGray · Prussian Blue

HEX

#39404A

RGB

rgb(57, 64, 74)

HSL

hsl(215, 13%, 26%)

HSB

hsb(215, 23%, 29%)

CMYK

cmyk(23%, 14%, 0%, 71%)

Oklch

oklch(36.9% 0.020 257.3)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#653D46

Crimson · DarkOliveGreen · Wine Red

HEX

#653D46

RGB

rgb(101, 61, 70)

HSL

hsl(346, 25%, 32%)

HSB

hsb(346, 40%, 40%)

CMYK

cmyk(0%, 40%, 31%, 60%)

Oklch

oklch(41.0% 0.057 5.3)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#803643

Crimson · Brown · Wine Red

HEX

#803643

RGB

rgb(128, 54, 67)

HSL

hsl(349, 41%, 36%)

HSB

hsb(349, 58%, 50%)

CMYK

cmyk(0%, 58%, 48%, 50%)

Oklch

oklch(43.7% 0.103 11.5)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#C4323D

Crimson · FireBrick · Passion Red

HEX

#C4323D

RGB

rgb(196, 50, 61)

HSL

hsl(355, 59%, 48%)

HSB

hsb(355, 74%, 77%)

CMYK

cmyk(0%, 74%, 69%, 23%)

Oklch

oklch(54.6% 0.182 21.9)

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

#F4152A

Vermilion · Crimson · Passion Red

HEX

#F4152A

RGB

rgb(244, 21, 42)

HSL

hsl(354, 91%, 52%)

HSB

hsb(354, 91%, 96%)

CMYK

cmyk(0%, 91%, 83%, 4%)

Oklch

oklch(61.4% 0.242 25.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

39404A

4B443A

Analogous

3A494B

39404A

3B3A4B

Triadic

39404A

4B3A41

414B3A

Split-Comp.

39404A

4B3B3A

494B3A

Tetradic

39404A

4B3A49

4B443A

3A4B3B

Contrast Matrix WCAG 2.1 Contrast

39404A	653D46	803643	C4323D	F4152A
—	1.2 Fail	1.3 Fail	1.9 Fail	2.5 Fail
1.2 Fail	—	1.1 Fail	1.7 Fail	2.2 Fail
1.3 Fail	1.1 Fail	—	1.5 Fail	2.0 Fail
1.9 Fail	1.7 Fail	1.5 Fail	—	1.3 Fail
2.5 Fail	2.2 Fail	2.0 Fail	1.3 Fail	—

White BG

10.5AAA

9.1AAA

8.3AAA

5.4AA

4.2AA Large

Black BG

2.0Fail

2.3Fail

2.5Fail

3.9AA Large

5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C48

545344

605F40

85833A

939125

Deuteranopia

3C3B47

565943

646A3F

8D983A

A0B124

Tritanopia

394645

634242

7C3D3D

BD3838

E92120

Achromatopsia

3F3F3F

4A4A4A

4E4E4E

5F5F5F

5A5A5A

Shades & Tints Shades & Tints

#39404A

Dark

Light

#653D46

Dark

Light

#803643

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #39404a;
  --color-2: #653d46;
  --color-3: #803643;
  --color-4: #c4323d;
  --color-5: #f4152a;
}

SCSS

$color-1: #39404a;
$color-2: #653d46;
$color-3: #803643;
$color-4: #c4323d;
$color-5: #f4152a;

TAILWIND

colors: {
  'brand-1': '#39404a',
  'brand-2': '#653d46',
  'brand-3': '#803643',
  'brand-4': '#c4323d',
  'brand-5': '#f4152a',
}

RGB Array

[57, 64, 74], [101, 61, 70], [128, 54, 67], [196, 50, 61], [244, 21, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #39404A, #653D46, #803643, #C4323D, #F4152A 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: #39404a; --color-2: #653d46; --color-3: #803643; --color-4: #c4323d; --color-5: #f4152a. 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 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