#3D3439 + #7D2F51 + #BD2969 + #F43A46 + #F05141 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3D3439

Rose Purple · DarkSlateGray · Dark Stone

HEX

#3D3439

RGB

rgb(61, 52, 57)

HSL

hsl(327, 8%, 22%)

HSB

hsb(327, 15%, 24%)

CMYK

cmyk(0%, 15%, 7%, 76%)

Oklch

oklch(33.6% 0.015 343.4)

Traditional「Rose Purple」· Paint「Dark Stone」· Creative Midnight Shadow

#7D2F51

Dark Violet · Brown · Camellia

HEX

#7D2F51

RGB

rgb(125, 47, 81)

HSL

hsl(334, 45%, 34%)

HSB

hsb(334, 62%, 49%)

CMYK

cmyk(0%, 62%, 35%, 51%)

Oklch

oklch(42.7% 0.114 355.9)

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

#BD2969

Dark Violet · MediumVioletRed · Camellia

HEX

#BD2969

RGB

rgb(189, 41, 105)

HSL

hsl(334, 64%, 45%)

HSB

hsb(334, 78%, 74%)

CMYK

cmyk(0%, 78%, 44%, 26%)

Oklch

oklch(53.7% 0.189 0.1)

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

#F43A46

Vermilion · Tomato · Passion Red

HEX

#F43A46

RGB

rgb(244, 58, 70)

HSL

hsl(356, 89%, 59%)

HSB

hsb(356, 76%, 96%)

CMYK

cmyk(0%, 76%, 71%, 4%)

Oklch

oklch(63.7% 0.220 23.1)

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

#F05141

Vermilion · Tomato · Passion Red

HEX

#F05141

RGB

rgb(240, 81, 65)

HSL

hsl(5, 85%, 60%)

HSB

hsb(5, 73%, 94%)

CMYK

cmyk(0%, 66%, 73%, 6%)

Oklch

oklch(65.1% 0.198 29.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D3439

343D38

Analogous

3C343D

3D3439

3D3434

Triadic

3D3439

393D34

34393D

Split-Comp.

3D3439

343D34

343D3C

Tetradic

3D3439

3D3C34

343D38

34343D

Contrast Matrix WCAG 2.1 Contrast

3D3439	7D2F51	BD2969	F43A46	F05141
—	1.4 Fail	2.1 Fail	3.2 AA Large	3.4 AA Large
1.4 Fail	—	1.5 Fail	2.3 Fail	2.5 Fail
2.1 Fail	1.5 Fail	—	1.5 Fail	1.6 Fail
3.2 AA Large	2.3 Fail	1.5 Fail	—	1.1 Fail
3.4 AA Large	2.5 Fail	1.6 Fail	1.1 Fail	—

White BG

12.0AAA

8.8AAA

5.7AA

3.8AA Large

3.5AA Large

Black BG

1.7Fail

2.4Fail

3.7AA Large

5.5AA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

393938

5B5B49

7D7C5A

A3A243

ABAA45

Deuteranopia

3A3A38

606647

869156

AEBC42

B4C046

Tritanopia

3D3737

794241

B64D4B

EB4140

E84849

Achromatopsia

373737

4A4A4A

5D5D5D

737373

7F7F7F

Shades & Tints Shades & Tints

#3D3439

Dark

Light

#7D2F51

Dark

Light

#BD2969

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d3439;
  --color-2: #7d2f51;
  --color-3: #bd2969;
  --color-4: #f43a46;
  --color-5: #f05141;
}

SCSS

$color-1: #3d3439;
$color-2: #7d2f51;
$color-3: #bd2969;
$color-4: #f43a46;
$color-5: #f05141;

TAILWIND

colors: {
  'brand-1': '#3d3439',
  'brand-2': '#7d2f51',
  'brand-3': '#bd2969',
  'brand-4': '#f43a46',
  'brand-5': '#f05141',
}

RGB Array

[61, 52, 57], [125, 47, 81], [189, 41, 105], [244, 58, 70], [240, 81, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D3439, #7D2F51, #BD2969, #F43A46, #F05141 is ideal for: corporate websites, product showcases, portfolios. 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: #3d3439; --color-2: #7d2f51; --color-3: #bd2969; --color-4: #f43a46; --color-5: #f05141. 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. 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