#3A2440 + #333F54 + #3B6B53 + #7D8732 + #B39D50 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3A2440

Dark Plum · DarkSlateGray · Dark Purple

HEX

#3A2440

RGB

rgb(58, 36, 64)

HSL

hsl(287, 28%, 20%)

HSB

hsb(287, 44%, 25%)

CMYK

cmyk(9%, 44%, 0%, 75%)

Oklch

oklch(30.0% 0.057 318.9)

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

#333F54

Indigo · DarkSlateGray · Prussian Blue

HEX

#333F54

RGB

rgb(51, 63, 84)

HSL

hsl(218, 24%, 26%)

HSB

hsb(218, 39%, 33%)

CMYK

cmyk(39%, 25%, 0%, 67%)

Oklch

oklch(36.6% 0.040 261.4)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#3B6B53

Mineral Blue · DarkSlateGray · Forest Green

HEX

#3B6B53

RGB

rgb(59, 107, 83)

HSL

hsl(150, 29%, 33%)

HSB

hsb(150, 45%, 42%)

CMYK

cmyk(45%, 0%, 22%, 58%)

Oklch

oklch(48.6% 0.066 160.8)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#7D8732

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#7D8732

RGB

rgb(125, 135, 50)

HSL

hsl(67, 46%, 36%)

HSB

hsb(67, 63%, 53%)

CMYK

cmyk(7%, 0%, 63%, 47%)

Oklch

oklch(59.7% 0.110 115.5)

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

#B39D50

Ginger · GoldenRod · Sunflower

HEX

#B39D50

RGB

rgb(179, 157, 80)

HSL

hsl(47, 39%, 51%)

HSB

hsb(47, 55%, 70%)

CMYK

cmyk(0%, 12%, 55%, 30%)

Oklch

oklch(69.9% 0.101 93.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A2440

2B4125

Analogous

2D2541

3A2440

412539

Triadic

3A2440

413B25

25413B

Split-Comp.

3A2440

394125

25412D

Tetradic

3A2440

412D25

2B4125

253941

Contrast Matrix WCAG 2.1 Contrast

3A2440	333F54	3B6B53	7D8732	B39D50
—	1.3 Fail	2.3 Fail	3.6 AA Large	5.2 AA
1.3 Fail	—	1.7 Fail	2.7 Fail	4.0 AA Large
2.3 Fail	1.7 Fail	—	1.6 Fail	2.3 Fail
3.6 AA Large	2.7 Fail	1.6 Fail	—	1.5 Fail
5.2 AA	4.0 AA Large	2.3 Fail	1.5 Fail	—

White BG

13.9AAA

10.6AAA

6.2AA

3.9AA Large

2.7Fail

Black BG

1.5Fail

2.0Fail

3.4AA Large

5.4AA

7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

303039

38384F

505059

818147

A9A963

Deuteranopia

323338

38374E

4D495A

81804C

ABAC67

Tritanopia

393433

344B4A

3D5D5E

7E575A

B27175

Achromatopsia

2E2E2E

3E3E3E

5A5A5A

7A7A7A

9B9B9B

Shades & Tints Shades & Tints

#3A2440

Dark

Light

#333F54

Dark

Light

#3B6B53

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a2440;
  --color-2: #333f54;
  --color-3: #3b6b53;
  --color-4: #7d8732;
  --color-5: #b39d50;
}

SCSS

$color-1: #3a2440;
$color-2: #333f54;
$color-3: #3b6b53;
$color-4: #7d8732;
$color-5: #b39d50;

TAILWIND

colors: {
  'brand-1': '#3a2440',
  'brand-2': '#333f54',
  'brand-3': '#3b6b53',
  'brand-4': '#7d8732',
  'brand-5': '#b39d50',
}

RGB Array

[58, 36, 64], [51, 63, 84], [59, 107, 83], [125, 135, 50], [179, 157, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3A2440, #333F54, #3B6B53, #7D8732, #B39D50 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: #3a2440; --color-2: #333f54; --color-3: #3b6b53; --color-4: #7d8732; --color-5: #b39d50. 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