← Back to Editor

#70394D · #7F5362 · #96767F · #D58165 · #DE9667

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#70394D

Dark Violet · DimGray · Camellia

HEX
#70394D
RGB
rgb(112, 57, 77)
HSL
hsl(338, 33%, 33%)
HSB
hsb(338, 49%, 44%)
CMYK
cmyk(0%, 49%, 31%, 56%)
Oklch
oklch(42.1% 0.081 358.0)

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

#7F5362

Dark Violet · DimGray · Camellia

HEX
#7F5362
RGB
rgb(127, 83, 98)
HSL
hsl(340, 21%, 41%)
HSB
hsb(340, 35%, 50%)
CMYK
cmyk(0%, 35%, 23%, 50%)
Oklch
oklch(49.5% 0.062 357.5)

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

#96767F

Dark Violet · Gray · Rose Pink

HEX
#96767F
RGB
rgb(150, 118, 127)
HSL
hsl(343, 13%, 53%)
HSB
hsb(343, 21%, 59%)
CMYK
cmyk(0%, 21%, 15%, 41%)
Oklch
oklch(59.9% 0.042 359.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#D58165

Apricot · DarkSalmon · Warm Sun

HEX
#D58165
RGB
rgb(213, 129, 101)
HSL
hsl(15, 57%, 62%)
HSB
hsb(15, 53%, 84%)
CMYK
cmyk(0%, 39%, 53%, 16%)
Oklch
oklch(68.6% 0.112 39.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#DE9667

Apricot · DarkSalmon · Warm Sun

HEX
#DE9667
RGB
rgb(222, 150, 103)
HSL
hsl(24, 64%, 64%)
HSB
hsb(24, 54%, 87%)
CMYK
cmyk(0%, 32%, 54%, 13%)
Oklch
oklch(73.5% 0.107 53.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

70394D
38705C

Analogous

703869
70394D
704038

Triadic

70394D
4D7038
384D70

Split-Comp.

70394D
387040
386970

Tetradic

70394D
697038
38705C
403870

Contrast Matrix WCAG 2.1 Contrast

70394D
7F5362
96767F
D58165
DE9667
—
1.4
Fail
2.2
Fail
3.0
AA Large
3.6
AA Large
1.4
Fail
—
1.6
Fail
2.2
Fail
2.6
Fail
2.2
Fail
1.6
Fail
—
1.4
Fail
1.7
Fail
3.0
AA Large
2.2
Fail
1.4
Fail
—
1.2
Fail
3.6
AA Large
2.6
Fail
1.7
Fail
1.2
Fail
—
White BG
8.8AAA
6.3AA
4.0AA Large
2.9Fail
2.4Fail
Black BG
2.4Fail
3.3AA Large
5.2AA
7.2AAA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

585848
6C6C5E
88887D
B1B06C
BFBE72

Deuteranopia

5B5F47
6F725E
8A8C7C
B6BC6D
C3C875

Tritanopia

6D4444
7D5C5B
947B7B
D17172
DA7B7D

Achromatopsia

4C4C4C
626262
818181
979797
A6A6A6

Shades & Tints Shades & Tints

#70394D

Dark
Light

#7F5362

Dark
Light

#96767F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #70394d;
  --color-2: #7f5362;
  --color-3: #96767f;
  --color-4: #d58165;
  --color-5: #de9667;
}

SCSS

$color-1: #70394d;
$color-2: #7f5362;
$color-3: #96767f;
$color-4: #d58165;
$color-5: #de9667;

TAILWIND

colors: {
  'brand-1': '#70394d',
  'brand-2': '#7f5362',
  'brand-3': '#96767f',
  'brand-4': '#d58165',
  'brand-5': '#de9667',
}

RGB Array

[112, 57, 77], [127, 83, 98], [150, 118, 127], [213, 129, 101], [222, 150, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #70394D, #7F5362, #96767F, #D58165, #DE9667 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: #70394d; --color-2: #7f5362; --color-3: #96767f; --color-4: #d58165; --color-5: #de9667. 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