← Back to Editor

#502C46 · #A83445 · #D67D2D · #DFE198 · #499E70

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

Color Details Color Details

#502C46

Rose Purple · DarkSlateGray · Eggplant

HEX
#502C46
RGB
rgb(80, 44, 70)
HSL
hsl(317, 29%, 24%)
HSB
hsb(317, 45%, 31%)
CMYK
cmyk(0%, 45%, 12%, 69%)
Oklch
oklch(34.9% 0.066 338.1)

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

#A83445

Crimson · Brown · Passion Red

HEX
#A83445
RGB
rgb(168, 52, 69)
HSL
hsl(351, 53%, 43%)
HSB
hsb(351, 69%, 66%)
CMYK
cmyk(0%, 69%, 59%, 34%)
Oklch
oklch(50.1% 0.151 16.1)

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

#D67D2D

Tangerine · Chocolate · Warm Sun

HEX
#D67D2D
RGB
rgb(214, 125, 45)
HSL
hsl(28, 67%, 51%)
HSB
hsb(28, 79%, 84%)
CMYK
cmyk(0%, 42%, 79%, 16%)
Oklch
oklch(67.4% 0.142 57.9)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#DFE198

Fresh Green · Khaki · Sunflower

HEX
#DFE198
RGB
rgb(223, 225, 152)
HSL
hsl(62, 55%, 74%)
HSB
hsb(62, 32%, 88%)
CMYK
cmyk(1%, 0%, 32%, 12%)
Oklch
oklch(89.1% 0.094 109.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#499E70

Celadon · MediumSeaGreen · Olive Green

HEX
#499E70
RGB
rgb(73, 158, 112)
HSL
hsl(148, 37%, 45%)
HSB
hsb(148, 54%, 62%)
CMYK
cmyk(54%, 0%, 29%, 38%)
Oklch
oklch(63.4% 0.109 157.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

502C46
2B4F36

Analogous

472B4F
502C46
4F2B33

Triadic

502C46
454F2B
2B454F

Split-Comp.

502C46
334F2B
2B4F47

Tetradic

502C46
4F472B
2B4F36
2B334F

Contrast Matrix WCAG 2.1 Contrast

502C46
A83445
D67D2D
DFE198
499E70
—
1.8
Fail
3.8
AA Large
8.6
AAA
3.6
AA Large
1.8
Fail
—
2.1
Fail
4.7
AA
2.0
Fail
3.8
AA Large
2.1
Fail
—
2.2
Fail
1.1
Fail
8.6
AAA
4.7
AA
2.2
Fail
—
2.4
Fail
3.6
AA Large
2.0
Fail
1.1
Fail
2.4
Fail
—
White BG
11.7AAA
6.5AA
3.1AA Large
1.4Fail
3.3AA Large
Black BG
1.8Fail
3.2AA Large
6.8AA
15.4AAA
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

404040
767541
AFAF40
E0E0AA
6E6F7B

Deuteranopia

43453E
7D8540
B5BB45
E0E0AE
69637E

Tritanopia

4E3B3A
A23E3D
D25053
DFB8BB
4D8486

Achromatopsia

3A3A3A
595959
8E8E8E
D8D8D8
7F7F7F

Shades & Tints Shades & Tints

#502C46

Dark
Light

#A83445

Dark
Light

#D67D2D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #502c46;
  --color-2: #a83445;
  --color-3: #d67d2d;
  --color-4: #dfe198;
  --color-5: #499e70;
}

SCSS

$color-1: #502c46;
$color-2: #a83445;
$color-3: #d67d2d;
$color-4: #dfe198;
$color-5: #499e70;

TAILWIND

colors: {
  'brand-1': '#502c46',
  'brand-2': '#a83445',
  'brand-3': '#d67d2d',
  'brand-4': '#dfe198',
  'brand-5': '#499e70',
}

RGB Array

[80, 44, 70], [168, 52, 69], [214, 125, 45], [223, 225, 152], [73, 158, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #502C46, #A83445, #D67D2D, #DFE198, #499E70 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: #502c46; --color-2: #a83445; --color-3: #d67d2d; --color-4: #dfe198; --color-5: #499e70. 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