#3B4A5D + #714A5B + #E34A63 + #D5B168 + #B3C799 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B4A5D

Indigo · DarkSlateGray · Prussian Blue

HEX

#3B4A5D

RGB

rgb(59, 74, 93)

HSL

hsl(214, 22%, 30%)

HSB

hsb(214, 37%, 36%)

CMYK

cmyk(37%, 20%, 0%, 64%)

Oklch

oklch(40.4% 0.037 254.6)

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

#714A5B

Dark Violet · DimGray · Camellia

HEX

#714A5B

RGB

rgb(113, 74, 91)

HSL

hsl(334, 21%, 37%)

HSB

hsb(334, 35%, 44%)

CMYK

cmyk(0%, 35%, 19%, 56%)

Oklch

oklch(45.8% 0.058 351.9)

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

#E34A63

Vermilion · Tomato · Passion Red

HEX

#E34A63

RGB

rgb(227, 74, 99)

HSL

hsl(350, 73%, 59%)

HSB

hsb(350, 67%, 89%)

CMYK

cmyk(0%, 67%, 56%, 11%)

Oklch

oklch(62.9% 0.188 15.0)

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

#D5B168

Ginger · BurlyWood · Sunflower

HEX

#D5B168

RGB

rgb(213, 177, 104)

HSL

hsl(40, 56%, 62%)

HSB

hsb(40, 51%, 84%)

CMYK

cmyk(0%, 17%, 51%, 16%)

Oklch

oklch(77.7% 0.101 83.9)

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

#B3C799

Willow Green · DarkGray · Apple Green

HEX

#B3C799

RGB

rgb(179, 199, 153)

HSL

hsl(86, 29%, 69%)

HSB

hsb(86, 23%, 78%)

CMYK

cmyk(10%, 0%, 23%, 22%)

Oklch

oklch(80.3% 0.066 126.9)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B4A5D

5D4F3C

Analogous

3C5B5D

3B4A5D

3E3C5D

Triadic

3B4A5D

5D3C4A

4A5D3C

Split-Comp.

3B4A5D

5D3E3C

5B5D3C

Tetradic

3B4A5D

5D3C5B

5D4F3C

3C5D3E

Contrast Matrix WCAG 2.1 Contrast

3B4A5D	714A5B	E34A63	D5B168	B3C799
—	1.2 Fail	2.3 Fail	4.4 AA Large	5.0 AA
1.2 Fail	—	1.9 Fail	3.6 AA Large	4.1 AA Large
2.3 Fail	1.9 Fail	—	1.9 Fail	2.1 Fail
4.4 AA Large	3.6 AA Large	1.9 Fail	—	1.1 Fail
5.0 AA	4.1 AA Large	2.1 Fail	1.1 Fail	—

White BG

9.0AAA

7.4AAA

3.9AA Large

2.0Fail

1.8Fail

Black BG

2.3Fail

2.8Fail

5.4AA

10.3AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

414258

606057

A19F5D

C5C57A

BCBCA4

Deuteranopia

414057

626556

AAB55C

C8CA7E

BBB9A7

Tritanopia

3C5554

6F5453

DB5857

D3888B

B4ADAF

Achromatopsia

484848

585858

7B7B7B

B3B3B3

BCBCBC

Shades & Tints Shades & Tints

#3B4A5D

Dark

Light

#714A5B

Dark

Light

#E34A63

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b4a5d;
  --color-2: #714a5b;
  --color-3: #e34a63;
  --color-4: #d5b168;
  --color-5: #b3c799;
}

SCSS

$color-1: #3b4a5d;
$color-2: #714a5b;
$color-3: #e34a63;
$color-4: #d5b168;
$color-5: #b3c799;

TAILWIND

colors: {
  'brand-1': '#3b4a5d',
  'brand-2': '#714a5b',
  'brand-3': '#e34a63',
  'brand-4': '#d5b168',
  'brand-5': '#b3c799',
}

RGB Array

[59, 74, 93], [113, 74, 91], [227, 74, 99], [213, 177, 104], [179, 199, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B4A5D, #714A5B, #E34A63, #D5B168, #B3C799 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: #3b4a5d; --color-2: #714a5b; --color-3: #e34a63; --color-4: #d5b168; --color-5: #b3c799. 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