#500121 + #68495E + #786755 + #BC5F3A + #7D103B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#500121

Dark Violet · Maroon · Raspberry

HEX

#500121

RGB

rgb(80, 1, 33)

HSL

hsl(336, 98%, 16%)

HSB

hsb(336, 99%, 31%)

CMYK

cmyk(0%, 99%, 59%, 69%)

Oklch

oklch(27.8% 0.110 5.1)

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

#68495E

Rose Purple · DimGray · Eggplant

HEX

#68495E

RGB

rgb(104, 73, 94)

HSL

hsl(319, 18%, 35%)

HSB

hsb(319, 30%, 41%)

CMYK

cmyk(0%, 30%, 10%, 59%)

Oklch

oklch(44.7% 0.052 339.0)

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

#786755

Ochre · DimGray · Amber Brown

HEX

#786755

RGB

rgb(120, 103, 85)

HSL

hsl(31, 17%, 40%)

HSB

hsb(31, 29%, 47%)

CMYK

cmyk(0%, 14%, 29%, 53%)

Oklch

oklch(52.5% 0.035 68.6)

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

#BC5F3A

Tangerine · Sienna · Amber Brown

HEX

#BC5F3A

RGB

rgb(188, 95, 58)

HSL

hsl(17, 53%, 48%)

HSB

hsb(17, 69%, 74%)

CMYK

cmyk(0%, 49%, 69%, 26%)

Oklch

oklch(59.0% 0.130 41.6)

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

#7D103B

Dark Violet · Brown · Camellia

HEX

#7D103B

RGB

rgb(125, 16, 59)

HSL

hsl(336, 77%, 28%)

HSB

hsb(336, 87%, 49%)

CMYK

cmyk(0%, 87%, 53%, 51%)

Oklch

oklch(38.8% 0.144 4.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

500121

015131

Analogous

510149

500121

510901

Triadic

500121

215101

012151

Split-Comp.

500121

015109

014951

Tetradic

500121

495101

015131

090151

Contrast Matrix WCAG 2.1 Contrast

500121	68495E	786755	BC5F3A	7D103B
—	2.0 Fail	2.8 Fail	3.5 AA Large	1.5 Fail
2.0 Fail	—	1.4 Fail	1.8 Fail	1.3 Fail
2.8 Fail	1.4 Fail	—	1.2 Fail	1.9 Fail
3.5 AA Large	1.8 Fail	1.2 Fail	—	2.4 Fail
1.5 Fail	1.3 Fail	1.9 Fail	2.4 Fail	—

White BG

15.4AAA

7.8AAA

5.4AA

4.3AA Large

10.5AAA

Black BG

1.4Fail

2.7Fail

3.9AA Large

4.8AA

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2D19

5B5A59

717059

949343

4E4D31

Deuteranopia

323817

5C5F58

72735A

99A045

545C2E

Tritanopia

4C1312

665554

775D5E

B74A4C

782827

Achromatopsia

1C1C1C

555555

6A6A6A

777777

353535

Shades & Tints Shades & Tints

#500121

Dark

Light

#68495E

Dark

Light

#786755

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #500121;
  --color-2: #68495e;
  --color-3: #786755;
  --color-4: #bc5f3a;
  --color-5: #7d103b;
}

SCSS

$color-1: #500121;
$color-2: #68495e;
$color-3: #786755;
$color-4: #bc5f3a;
$color-5: #7d103b;

TAILWIND

colors: {
  'brand-1': '#500121',
  'brand-2': '#68495e',
  'brand-3': '#786755',
  'brand-4': '#bc5f3a',
  'brand-5': '#7d103b',
}

RGB Array

[80, 1, 33], [104, 73, 94], [120, 103, 85], [188, 95, 58], [125, 16, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #500121, #68495E, #786755, #BC5F3A, #7D103B is ideal for: tech websites, dark mode UIs, game UIs. 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: #500121; --color-2: #68495e; --color-3: #786755; --color-4: #bc5f3a; --color-5: #7d103b. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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