← Back to Editor

#3E5A70 · #314256 · #973C3C · #713E3E · #F8F7F3

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 LibraryData Visualization

Color Details Color Details

#3E5A70

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#3E5A70
RGB
rgb(62, 90, 112)
HSL
hsl(206, 29%, 34%)
HSB
hsb(206, 45%, 44%)
CMYK
cmyk(45%, 20%, 0%, 56%)
Oklch
oklch(45.5% 0.049 242.8)

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

#314256

Indigo · DarkSlateGray · Prussian Blue

HEX
#314256
RGB
rgb(49, 66, 86)
HSL
hsl(212, 27%, 26%)
HSB
hsb(212, 43%, 34%)
CMYK
cmyk(43%, 23%, 0%, 66%)
Oklch
oklch(37.3% 0.041 252.9)

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

#973C3C

Crimson · Sienna · Passion Red

HEX
#973C3C
RGB
rgb(151, 60, 60)
HSL
hsl(0, 43%, 41%)
HSB
hsb(0, 60%, 59%)
CMYK
cmyk(0%, 60%, 60%, 41%)
Oklch
oklch(48.1% 0.123 22.9)

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

#713E3E

Crimson · Sienna · Wine Red

HEX
#713E3E
RGB
rgb(113, 62, 62)
HSL
hsl(0, 29%, 34%)
HSB
hsb(0, 45%, 44%)
CMYK
cmyk(0%, 45%, 45%, 56%)
Oklch
oklch(42.7% 0.072 20.5)

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

#F8F7F3

Goose Yellow · SeaShell · Lemon Cream

HEX
#F8F7F3
RGB
rgb(248, 247, 243)
HSL
hsl(48, 26%, 96%)
HSB
hsb(48, 2%, 97%)
CMYK
cmyk(0%, 0%, 2%, 3%)
Oklch
oklch(97.6% 0.005 95.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3E5A70
70533E

Analogous

3E706C
3E5A70
3E4170

Triadic

3E5A70
703E5A
5A703E

Split-Comp.

3E5A70
703E41
706C3E

Tetradic

3E5A70
6C3E70
70533E
41703E

Contrast Matrix WCAG 2.1 Contrast

3E5A70
314256
973C3C
713E3E
F8F7F3
—
1.4
Fail
1.0
Fail
1.2
Fail
6.8
AA
1.4
Fail
—
1.5
Fail
1.2
Fail
9.6
AAA
1.0
Fail
1.5
Fail
—
1.2
Fail
6.5
AA
1.2
Fail
1.2
Fail
1.2
Fail
—
8.0
AAA
6.8
AA
9.6
AAA
6.5
AA
8.0
AAA
—
White BG
7.2AAA
10.3AAA
6.9AA
8.5AAA
1.1Fail
Black BG
2.9Fail
2.0Fail
3.0AA Large
2.5Fail
19.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A6B
383951
706F3C
5B5A3E
F8F8F4

Deuteranopia

494669
373650
757C3C
5E623E
F8F8F4

Tritanopia

3F6666
324D4D
923C3C
6E3E3E
F8F5F5

Achromatopsia

545454
3F3F3F
575757
4D4D4D
F7F7F7

Shades & Tints Shades & Tints

#3E5A70

Dark
Light

#314256

Dark
Light

#973C3C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3e5a70;
  --color-2: #314256;
  --color-3: #973c3c;
  --color-4: #713e3e;
  --color-5: #f8f7f3;
}

SCSS

$color-1: #3e5a70;
$color-2: #314256;
$color-3: #973c3c;
$color-4: #713e3e;
$color-5: #f8f7f3;

TAILWIND

colors: {
  'brand-1': '#3e5a70',
  'brand-2': '#314256',
  'brand-3': '#973c3c',
  'brand-4': '#713e3e',
  'brand-5': '#f8f7f3',
}

RGB Array

[62, 90, 112], [49, 66, 86], [151, 60, 60], [113, 62, 62], [248, 247, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3E5A70, #314256, #973C3C, #713E3E, #F8F7F3 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #3e5a70; --color-2: #314256; --color-3: #973c3c; --color-4: #713e3e; --color-5: #f8f7f3. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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