#3A3A1E + #58561D + #870F63 + #AC2872 + #E03C8E · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3A3A1E

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#3A3A1E

RGB

rgb(58, 58, 30)

HSL

hsl(60, 32%, 17%)

HSB

hsb(60, 48%, 23%)

CMYK

cmyk(0%, 0%, 48%, 77%)

Oklch

oklch(34.1% 0.044 108.5)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#58561D

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#58561D

RGB

rgb(88, 86, 29)

HSL

hsl(58, 50%, 23%)

HSB

hsb(58, 67%, 35%)

CMYK

cmyk(0%, 2%, 67%, 65%)

Oklch

oklch(44.3% 0.077 107.3)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#870F63

Rose Purple · Purple · Eggplant

HEX

#870F63

RGB

rgb(135, 15, 99)

HSL

hsl(318, 80%, 29%)

HSB

hsb(318, 89%, 53%)

CMYK

cmyk(0%, 89%, 27%, 47%)

Oklch

oklch(42.3% 0.169 344.5)

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

#AC2872

Rose Purple · MediumVioletRed · Camellia

HEX

#AC2872

RGB

rgb(172, 40, 114)

HSL

hsl(326, 62%, 42%)

HSB

hsb(326, 77%, 67%)

CMYK

cmyk(0%, 77%, 34%, 33%)

Oklch

oklch(51.0% 0.180 351.3)

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

#E03C8E

Dark Violet · MediumVioletRed · Rose Pink

HEX

#E03C8E

RGB

rgb(224, 60, 142)

HSL

hsl(330, 73%, 56%)

HSB

hsb(330, 73%, 88%)

CMYK

cmyk(0%, 73%, 37%, 12%)

Oklch

oklch(62.3% 0.211 354.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A3A1E

1D1D39

Analogous

392B1D

3A3A1E

2B391D

Triadic

3A3A1E

1D3939

391D39

Split-Comp.

3A3A1E

1D2B39

2B1D39

Tetradic

3A3A1E

1D392B

1D1D39

391D2B

Contrast Matrix WCAG 2.1 Contrast

3A3A1E	58561D	870F63	AC2872	E03C8E
—	1.5 Fail	1.3 Fail	1.8 Fail	2.9 Fail
1.5 Fail	—	1.2 Fail	1.2 Fail	1.9 Fail
1.3 Fail	1.2 Fail	—	1.4 Fail	2.3 Fail
1.8 Fail	1.2 Fail	1.4 Fail	—	1.6 Fail
2.9 Fail	1.9 Fail	2.3 Fail	1.6 Fail	—

White BG

11.6AAA

7.6AAA

9.2AAA

6.4AA

4.0AA Large

Black BG

1.8Fail

2.8Fail

2.3Fail

3.3AA Large

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A25

57572B

53524F

737260

99987A

Deuteranopia

3A3A26

57572E

5A634A

7B845C

A3AF75

Tritanopia

3A2A2B

583638

813F3B

A5524F

D86A67

Achromatopsia

373737

505050

3C3C3C

585858

767676

Shades & Tints Shades & Tints

#3A3A1E

Dark

Light

#58561D

Dark

Light

#870F63

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a3a1e;
  --color-2: #58561d;
  --color-3: #870f63;
  --color-4: #ac2872;
  --color-5: #e03c8e;
}

SCSS

$color-1: #3a3a1e;
$color-2: #58561d;
$color-3: #870f63;
$color-4: #ac2872;
$color-5: #e03c8e;

TAILWIND

colors: {
  'brand-1': '#3a3a1e',
  'brand-2': '#58561d',
  'brand-3': '#870f63',
  'brand-4': '#ac2872',
  'brand-5': '#e03c8e',
}

RGB Array

[58, 58, 30], [88, 86, 29], [135, 15, 99], [172, 40, 114], [224, 60, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #3A3A1E, #58561D, #870F63, #AC2872, #E03C8E 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: #3a3a1e; --color-2: #58561d; --color-3: #870f63; --color-4: #ac2872; --color-5: #e03c8e. 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 dark-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