← Back to Editor

#3B4A58 · #604458 · #83465B · #AA4960 · #D04E67

A 5-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

#3B4A58

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#3B4A58
RGB
rgb(59, 74, 88)
HSL
hsl(209, 20%, 29%)
HSB
hsb(209, 33%, 35%)
CMYK
cmyk(33%, 16%, 0%, 65%)
Oklch
oklch(40.2% 0.030 246.8)

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

#604458

Rose Purple · DimGray · Eggplant

HEX
#604458
RGB
rgb(96, 68, 88)
HSL
hsl(317, 17%, 32%)
HSB
hsb(317, 29%, 38%)
CMYK
cmyk(0%, 29%, 8%, 62%)
Oklch
oklch(42.5% 0.049 337.3)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#83465B

Dark Violet · DimGray · Camellia

HEX
#83465B
RGB
rgb(131, 70, 91)
HSL
hsl(339, 30%, 39%)
HSB
hsb(339, 47%, 51%)
CMYK
cmyk(0%, 47%, 31%, 49%)
Oklch
oklch(47.5% 0.087 359.0)

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

#AA4960

Crimson · Sienna · Passion Red

HEX
#AA4960
RGB
rgb(170, 73, 96)
HSL
hsl(346, 40%, 48%)
HSB
hsb(346, 57%, 67%)
CMYK
cmyk(0%, 57%, 44%, 33%)
Oklch
oklch(53.8% 0.129 7.7)

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

#D04E67

Crimson · Tomato · Passion Red

HEX
#D04E67
RGB
rgb(208, 78, 103)
HSL
hsl(348, 58%, 56%)
HSB
hsb(348, 63%, 82%)
CMYK
cmyk(0%, 63%, 50%, 18%)
Oklch
oklch(60.4% 0.165 11.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B4A58
59493B

Analogous

3B5958
3B4A58
3B3C59

Triadic

3B4A58
593B4A
4A593B

Split-Comp.

3B4A58
593B3C
59583B

Tetradic

3B4A58
583B59
59493B
3C593B

Contrast Matrix WCAG 2.1 Contrast

3B4A58
604458
83465B
AA4960
D04E67
—
1.1
Fail
1.3
Fail
1.7
Fail
2.2
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
2.0
Fail
1.3
Fail
1.2
Fail
—
1.3
Fail
1.7
Fail
1.7
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
2.2
Fail
2.0
Fail
1.7
Fail
1.3
Fail
—
White BG
9.1AAA
8.5AAA
7.0AAA
5.5AA
4.2AA Large
Black BG
2.3Fail
2.5Fail
3.0Fail
3.8AA Large
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

414255
545453
696856
807F5A
989761

Deuteranopia

414054
565852
6C7155
868D59
9FA960

Tritanopia

3C5251
5F4F4F
805251
A55655
CA5C5B

Achromatopsia

474747
4F4F4F
5B5B5B
696969
787878

Shades & Tints Shades & Tints

#3B4A58

Dark
Light

#604458

Dark
Light

#83465B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b4a58;
  --color-2: #604458;
  --color-3: #83465b;
  --color-4: #aa4960;
  --color-5: #d04e67;
}

SCSS

$color-1: #3b4a58;
$color-2: #604458;
$color-3: #83465b;
$color-4: #aa4960;
$color-5: #d04e67;

TAILWIND

colors: {
  'brand-1': '#3b4a58',
  'brand-2': '#604458',
  'brand-3': '#83465b',
  'brand-4': '#aa4960',
  'brand-5': '#d04e67',
}

RGB Array

[59, 74, 88], [96, 68, 88], [131, 70, 91], [170, 73, 96], [208, 78, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B4A58, #604458, #83465B, #AA4960, #D04E67 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: #3b4a58; --color-2: #604458; --color-3: #83465b; --color-4: #aa4960; --color-5: #d04e67. 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