← Back to Editor

#5E3A55 · #4A485E · #476370 · #509490 · #70B38E

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

#5E3A55

Rose Purple · DarkSlateGray · Eggplant

HEX
#5E3A55
RGB
rgb(94, 58, 85)
HSL
hsl(315, 24%, 30%)
HSB
hsb(315, 38%, 37%)
CMYK
cmyk(0%, 38%, 10%, 63%)
Oklch
oklch(40.1% 0.065 336.4)

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

#4A485E

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#4A485E
RGB
rgb(74, 72, 94)
HSL
hsl(245, 13%, 33%)
HSB
hsb(245, 23%, 37%)
CMYK
cmyk(21%, 23%, 0%, 63%)
Oklch
oklch(41.2% 0.037 288.9)

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

#476370

Slate Blue · DimGray · Mint Ice

HEX
#476370
RGB
rgb(71, 99, 112)
HSL
hsl(199, 22%, 36%)
HSB
hsb(199, 37%, 44%)
CMYK
cmyk(37%, 12%, 0%, 56%)
Oklch
oklch(48.3% 0.039 228.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#509490

Mineral Blue · CadetBlue · Mint Ice

HEX
#509490
RGB
rgb(80, 148, 144)
HSL
hsl(176, 30%, 45%)
HSB
hsb(176, 46%, 58%)
CMYK
cmyk(46%, 0%, 3%, 42%)
Oklch
oklch(62.1% 0.070 190.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#70B38E

Celadon · DarkSeaGreen · Olive Green

HEX
#70B38E
RGB
rgb(112, 179, 142)
HSL
hsl(147, 31%, 57%)
HSB
hsb(147, 37%, 70%)
CMYK
cmyk(37%, 0%, 21%, 30%)
Oklch
oklch(71.1% 0.088 159.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E3A55
3A5F43

Analogous

563A5F
5E3A55
5F3A43

Triadic

5E3A55
565F3A
3A565F

Split-Comp.

5E3A55
435F3A
3A5F56

Tetradic

5E3A55
5F563A
3A5F43
3A435F

Contrast Matrix WCAG 2.1 Contrast

5E3A55
4A485E
476370
509490
70B38E
—
1.1
Fail
1.5
Fail
2.7
Fail
3.9
AA Large
1.1
Fail
—
1.4
Fail
2.5
Fail
3.6
AA Large
1.5
Fail
1.4
Fail
—
1.8
Fail
2.6
Fail
2.7
Fail
2.5
Fail
1.8
Fail
—
1.4
Fail
3.9
AA Large
3.6
AA Large
2.6
Fail
1.4
Fail
—
White BG
9.5AAA
8.8AAA
6.4AA
3.5AA Large
2.5Fail
Black BG
2.2Fail
2.4Fail
3.3AA Large
6.0AA
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E4E
494959
53536D
6D6E91
8D8E97

Deuteranopia

51534D
494957
524F6C
6A6491
898499

Tritanopia

5C4948
4A5454
486A6A
539292
739EA0

Achromatopsia

484848
4B4B4B
5C5C5C
7F7F7F
9B9B9B

Shades & Tints Shades & Tints

#5E3A55

Dark
Light

#4A485E

Dark
Light

#476370

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e3a55;
  --color-2: #4a485e;
  --color-3: #476370;
  --color-4: #509490;
  --color-5: #70b38e;
}

SCSS

$color-1: #5e3a55;
$color-2: #4a485e;
$color-3: #476370;
$color-4: #509490;
$color-5: #70b38e;

TAILWIND

colors: {
  'brand-1': '#5e3a55',
  'brand-2': '#4a485e',
  'brand-3': '#476370',
  'brand-4': '#509490',
  'brand-5': '#70b38e',
}

RGB Array

[94, 58, 85], [74, 72, 94], [71, 99, 112], [80, 148, 144], [112, 179, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5E3A55, #4A485E, #476370, #509490, #70B38E is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #5e3a55; --color-2: #4a485e; --color-3: #476370; --color-4: #509490; --color-5: #70b38e. 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. Restrained colors convey professionalism and trust. 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