← Back to Editor

#503C54 · #7E5661 · #A3686E · #BA8074 · #DCA686

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#503C54

Dark Plum · DarkSlateGray · Eggplant

HEX
#503C54
RGB
rgb(80, 60, 84)
HSL
hsl(290, 17%, 28%)
HSB
hsb(290, 29%, 33%)
CMYK
cmyk(5%, 29%, 0%, 67%)
Oklch
oklch(38.7% 0.047 320.7)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#7E5661

Dark Violet · DimGray · Camellia

HEX
#7E5661
RGB
rgb(126, 86, 97)
HSL
hsl(344, 19%, 42%)
HSB
hsb(344, 32%, 49%)
CMYK
cmyk(0%, 32%, 23%, 51%)
Oklch
oklch(50.0% 0.055 1.3)

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

#A3686E

Crimson · Gray · Passion Red

HEX
#A3686E
RGB
rgb(163, 104, 110)
HSL
hsl(354, 24%, 52%)
HSB
hsb(354, 36%, 64%)
CMYK
cmyk(0%, 36%, 33%, 36%)
Oklch
oklch(58.2% 0.076 13.1)

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

#BA8074

Crimson · DarkSalmon · Passion Red

HEX
#BA8074
RGB
rgb(186, 128, 116)
HSL
hsl(10, 34%, 59%)
HSB
hsb(10, 38%, 73%)
CMYK
cmyk(0%, 31%, 38%, 27%)
Oklch
oklch(65.5% 0.075 32.1)

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

#DCA686

Apricot · BurlyWood · Warm Sun

HEX
#DCA686
RGB
rgb(220, 166, 134)
HSL
hsl(22, 55%, 69%)
HSB
hsb(22, 39%, 86%)
CMYK
cmyk(0%, 25%, 39%, 14%)
Oklch
oklch(76.8% 0.078 51.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

503C54
3F543B

Analogous

433B54
503C54
543B4B

Triadic

503C54
544F3B
3B544F

Split-Comp.

503C54
4B543B
3B5443

Tetradic

503C54
54433B
3F543B
3B4B54

Contrast Matrix WCAG 2.1 Contrast

503C54
7E5661
A3686E
BA8074
DCA686
—
1.6
Fail
2.3
Fail
3.0
AA Large
4.7
AA
1.6
Fail
—
1.4
Fail
1.9
Fail
2.9
Fail
2.3
Fail
1.4
Fail
—
1.3
Fail
2.1
Fail
3.0
AA Large
1.9
Fail
1.3
Fail
—
1.5
Fail
4.7
AA
2.9
Fail
2.1
Fail
1.5
Fail
—
White BG
9.9AAA
6.2AA
4.4AA Large
3.3AA Large
2.1Fail
Black BG
2.1Fail
3.4AA Large
4.8AA
6.4AA
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47474E
6D6C5E
89896D
A1A077
C5C48E

Deuteranopia

494A4D
6F725E
8D916C
A4A978
C8CC90

Tritanopia

4F4A49
7C5C5C
A06B6B
B7797A
D99495

Achromatopsia

454545
636363
7A7A7A
909090
B2B2B2

Shades & Tints Shades & Tints

#503C54

Dark
Light

#7E5661

Dark
Light

#A3686E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #503c54;
  --color-2: #7e5661;
  --color-3: #a3686e;
  --color-4: #ba8074;
  --color-5: #dca686;
}

SCSS

$color-1: #503c54;
$color-2: #7e5661;
$color-3: #a3686e;
$color-4: #ba8074;
$color-5: #dca686;

TAILWIND

colors: {
  'brand-1': '#503c54',
  'brand-2': '#7e5661',
  'brand-3': '#a3686e',
  'brand-4': '#ba8074',
  'brand-5': '#dca686',
}

RGB Array

[80, 60, 84], [126, 86, 97], [163, 104, 110], [186, 128, 116], [220, 166, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #503C54, #7E5661, #A3686E, #BA8074, #DCA686 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #503c54; --color-2: #7e5661; --color-3: #a3686e; --color-4: #ba8074; --color-5: #dca686. 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 warm-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