← Back to Editor

#50363F · #C4372E · #D1561D · #D69A2A · #A4C7C1

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

#50363F

Dark Violet · DarkSlateGray · Camellia

HEX
#50363F
RGB
rgb(80, 54, 63)
HSL
hsl(339, 19%, 26%)
HSB
hsb(339, 33%, 31%)
CMYK
cmyk(0%, 32%, 21%, 69%)
Oklch
oklch(36.6% 0.040 356.8)

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

#C4372E

Vermilion · FireBrick · Passion Red

HEX
#C4372E
RGB
rgb(196, 55, 46)
HSL
hsl(4, 62%, 47%)
HSB
hsb(4, 77%, 77%)
CMYK
cmyk(0%, 72%, 77%, 23%)
Oklch
oklch(54.9% 0.179 28.2)

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

#D1561D

Tangerine · Chocolate · Amber Brown

HEX
#D1561D
RGB
rgb(209, 86, 29)
HSL
hsl(19, 76%, 47%)
HSB
hsb(19, 86%, 82%)
CMYK
cmyk(0%, 59%, 86%, 18%)
Oklch
oklch(60.5% 0.169 41.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#D69A2A

Ochre · GoldenRod · Amber Brown

HEX
#D69A2A
RGB
rgb(214, 154, 42)
HSL
hsl(39, 68%, 50%)
HSB
hsb(39, 80%, 84%)
CMYK
cmyk(0%, 28%, 80%, 16%)
Oklch
oklch(72.6% 0.139 77.8)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#A4C7C1

Jade · Silver · Lake Green

HEX
#A4C7C1
RGB
rgb(164, 199, 193)
HSL
hsl(170, 24%, 71%)
HSB
hsb(170, 18%, 78%)
CMYK
cmyk(18%, 0%, 3%, 22%)
Oklch
oklch(80.2% 0.038 183.8)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

50363F
364F46

Analogous

4F364B
50363F
4F3936

Triadic

50363F
3F4F36
363F4F

Split-Comp.

50363F
364F39
364B4F

Tetradic

50363F
4B4F36
364F46
39364F

Contrast Matrix WCAG 2.1 Contrast

50363F
C4372E
D1561D
D69A2A
A4C7C1
—
2.0
Fail
2.6
Fail
4.4
AA Large
5.9
AA
2.0
Fail
—
1.3
Fail
2.2
Fail
2.9
Fail
2.6
Fail
1.3
Fail
—
1.7
Fail
2.3
Fail
4.4
AA Large
2.2
Fail
1.7
Fail
—
1.4
Fail
5.9
AA
2.9
Fail
2.3
Fail
1.4
Fail
—
White BG
10.8AAA
5.3AA
4.2AA Large
2.5Fail
1.8Fail
Black BG
1.9Fail
3.9AA Large
5.1AA
8.5AAA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

45453D
878630
9C9B2B
BCBB45
B3B3C2

Deuteranopia

46483C
8F9A31
A3AC2E
C0C44C
B1AFC3

Tritanopia

4F3B3B
BD3232
CB3638
D35A5F
A6C4C4

Achromatopsia

3F3F3F
606060
747474
9F9F9F
BCBCBC

Shades & Tints Shades & Tints

#50363F

Dark
Light

#C4372E

Dark
Light

#D1561D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #50363f;
  --color-2: #c4372e;
  --color-3: #d1561d;
  --color-4: #d69a2a;
  --color-5: #a4c7c1;
}

SCSS

$color-1: #50363f;
$color-2: #c4372e;
$color-3: #d1561d;
$color-4: #d69a2a;
$color-5: #a4c7c1;

TAILWIND

colors: {
  'brand-1': '#50363f',
  'brand-2': '#c4372e',
  'brand-3': '#d1561d',
  'brand-4': '#d69a2a',
  'brand-5': '#a4c7c1',
}

RGB Array

[80, 54, 63], [196, 55, 46], [209, 86, 29], [214, 154, 42], [164, 199, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #50363F, #C4372E, #D1561D, #D69A2A, #A4C7C1 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: #50363f; --color-2: #c4372e; --color-3: #d1561d; --color-4: #d69a2a; --color-5: #a4c7c1. 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