#4D2311 + #481F32 + #451C4A + #421961 + #3F1678 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4D2311

Tangerine · Maroon · Cinnamon

HEX

#4D2311

RGB

rgb(77, 35, 17)

HSL

hsl(18, 64%, 18%)

HSB

hsb(18, 78%, 30%)

CMYK

cmyk(0%, 55%, 78%, 70%)

Oklch

oklch(31.1% 0.070 42.7)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#481F32

Dark Violet · DarkSlateGray · Raspberry

HEX

#481F32

RGB

rgb(72, 31, 50)

HSL

hsl(332, 40%, 20%)

HSB

hsb(332, 57%, 28%)

CMYK

cmyk(0%, 57%, 31%, 72%)

Oklch

oklch(30.5% 0.067 352.8)

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

#451C4A

Dark Plum · DarkSlateGray · Dark Purple

HEX

#451C4A

RGB

rgb(69, 28, 74)

HSL

hsl(293, 45%, 20%)

HSB

hsb(293, 62%, 29%)

CMYK

cmyk(7%, 62%, 0%, 71%)

Oklch

oklch(30.7% 0.093 323.2)

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

#421961

Royal Purple · MidnightBlue · Eggplant

HEX

#421961

RGB

rgb(66, 25, 97)

HSL

hsl(274, 59%, 24%)

HSB

hsb(274, 74%, 38%)

CMYK

cmyk(32%, 74%, 0%, 62%)

Oklch

oklch(31.6% 0.123 306.7)

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

#3F1678

Deep Indigo · MidnightBlue · Eggplant

HEX

#3F1678

RGB

rgb(63, 22, 120)

HSL

hsl(265, 69%, 28%)

HSB

hsb(265, 82%, 47%)

CMYK

cmyk(48%, 82%, 0%, 53%)

Oklch

oklch(32.9% 0.152 295.6)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D2311

113A4B

Analogous

4B111C

4D2311

4B4011

Triadic

4D2311

114B22

22114B

Split-Comp.

4D2311

114B40

111C4B

Tetradic

4D2311

1C4B11

113A4B

40114B

Contrast Matrix WCAG 2.1 Contrast

4D2311	481F32	451C4A	421961	3F1678
—	1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

13.4AAA

13.8AAA

13.6AAA

13.1AAA

Black BG

1.6Fail

1.5Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3A15

36362D

33333F

303050

2D2D60

Deuteranopia

3D4016

393C2C

36393C

33364B

30335B

Tritanopia

4B191A

462A29

433634

40423F

3D4E49

Achromatopsia

2E2E2E

2D2D2D

2E2E2E

2D2D2D

Shades & Tints Shades & Tints

#4D2311

Dark

Light

#481F32

Dark

Light

#451C4A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d2311;
  --color-2: #481f32;
  --color-3: #451c4a;
  --color-4: #421961;
  --color-5: #3f1678;
}

SCSS

$color-1: #4d2311;
$color-2: #481f32;
$color-3: #451c4a;
$color-4: #421961;
$color-5: #3f1678;

TAILWIND

colors: {
  'brand-1': '#4d2311',
  'brand-2': '#481f32',
  'brand-3': '#451c4a',
  'brand-4': '#421961',
  'brand-5': '#3f1678',
}

RGB Array

[77, 35, 17], [72, 31, 50], [69, 28, 74], [66, 25, 97], [63, 22, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D2311, #481F32, #451C4A, #421961, #3F1678 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: #4d2311; --color-2: #481f32; --color-3: #451c4a; --color-4: #421961; --color-5: #3f1678. 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