#3D6F92 + #474351 + #A9372D + #DB6324 + #E4B559 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3D6F92

Slate Blue · SteelBlue · Navy Blue

HEX

#3D6F92

RGB

rgb(61, 111, 146)

HSL

hsl(205, 41%, 41%)

HSB

hsb(205, 58%, 57%)

CMYK

cmyk(58%, 24%, 0%, 43%)

Oklch

oklch(52.2% 0.078 240.9)

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

#474351

Deep Indigo · DarkSlateGray · Charcoal

HEX

#474351

RGB

rgb(71, 67, 81)

HSL

hsl(257, 9%, 29%)

HSB

hsb(257, 17%, 32%)

CMYK

cmyk(12%, 17%, 0%, 68%)

Oklch

oklch(39.2% 0.024 298.4)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#A9372D

Crimson · Brown · Passion Red

HEX

#A9372D

RGB

rgb(169, 55, 45)

HSL

hsl(5, 58%, 42%)

HSB

hsb(5, 73%, 66%)

CMYK

cmyk(0%, 67%, 73%, 34%)

Oklch

oklch(50.2% 0.151 28.6)

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

#DB6324

Tangerine · Chocolate · Amber Brown

HEX

#DB6324

RGB

rgb(219, 99, 36)

HSL

hsl(21, 72%, 50%)

HSB

hsb(21, 84%, 86%)

CMYK

cmyk(0%, 55%, 84%, 14%)

Oklch

oklch(63.9% 0.167 44.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#E4B559

Ginger · SandyBrown · Sunflower

HEX

#E4B559

RGB

rgb(228, 181, 89)

HSL

hsl(40, 72%, 62%)

HSB

hsb(40, 61%, 89%)

CMYK

cmyk(0%, 21%, 61%, 11%)

Oklch

oklch(79.8% 0.122 82.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D6F92

93613E

Analogous

3E938C

3D6F92

3E4593

Triadic

3D6F92

933E70

70933E

Split-Comp.

3D6F92

933E45

938C3E

Tetradic

3D6F92

8C3E93

93613E

45933E

Contrast Matrix WCAG 2.1 Contrast

3D6F92	474351	A9372D	DB6324	E4B559
—	1.8 Fail	1.2 Fail	1.5 Fail	2.8 Fail
1.8 Fail	—	1.5 Fail	2.7 Fail	5.0 AA
1.2 Fail	1.5 Fail	—	1.8 Fail	3.4 AA Large
1.5 Fail	2.7 Fail	1.8 Fail	—	1.9 Fail
2.8 Fail	5.0 AA	3.4 AA Large	1.9 Fail	—

White BG

5.4AA

9.6AAA

6.4AA

3.6AA Large

1.9Fail

Black BG

3.9AA Large

2.2Fail

3.3AA Large

5.8AA

11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

53538A

45454E

78772F

A7A633

D0CF6F

Deuteranopia

504C88

46464D

7E8730

AEB737

D2D675

Tritanopia

408381

474B4A

A33132

D53F42

E28185

Achromatopsia

646464

464646

585858

808080

B9B9B9

Shades & Tints Shades & Tints

#3D6F92

Dark

Light

#474351

Dark

Light

#A9372D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d6f92;
  --color-2: #474351;
  --color-3: #a9372d;
  --color-4: #db6324;
  --color-5: #e4b559;
}

SCSS

$color-1: #3d6f92;
$color-2: #474351;
$color-3: #a9372d;
$color-4: #db6324;
$color-5: #e4b559;

TAILWIND

colors: {
  'brand-1': '#3d6f92',
  'brand-2': '#474351',
  'brand-3': '#a9372d',
  'brand-4': '#db6324',
  'brand-5': '#e4b559',
}

RGB Array

[61, 111, 146], [71, 67, 81], [169, 55, 45], [219, 99, 36], [228, 181, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #3D6F92, #474351, #A9372D, #DB6324, #E4B559 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: #3d6f92; --color-2: #474351; --color-3: #a9372d; --color-4: #db6324; --color-5: #e4b559. 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 warm-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