#341F48 + #45444A + #7C7763 + #5AA483 + #31DDA5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#341F48

Dark Plum · MidnightBlue · Dark Purple

HEX

#341F48

RGB

rgb(52, 31, 72)

HSL

hsl(271, 40%, 20%)

HSB

hsb(271, 57%, 28%)

CMYK

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

Oklch

oklch(28.7% 0.076 305.8)

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

#45444A

Dark Cyan · DarkSlateGray · Charcoal

HEX

#45444A

RGB

rgb(69, 68, 74)

HSL

hsl(250, 4%, 28%)

HSB

hsb(250, 8%, 29%)

CMYK

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

Oklch

oklch(39.0% 0.010 293.6)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#7C7763

Ochre · DimGray · Honey Gold

HEX

#7C7763

RGB

rgb(124, 119, 99)

HSL

hsl(48, 11%, 44%)

HSB

hsb(48, 20%, 49%)

CMYK

cmyk(0%, 4%, 20%, 51%)

Oklch

oklch(56.8% 0.030 95.6)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#5AA483

Mineral Blue · CadetBlue · Olive Green

HEX

#5AA483

RGB

rgb(90, 164, 131)

HSL

hsl(153, 29%, 50%)

HSB

hsb(153, 45%, 64%)

CMYK

cmyk(45%, 0%, 20%, 36%)

Oklch

oklch(66.1% 0.090 163.4)

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

#31DDA5

Mineral Blue · Turquoise · Lake Green

HEX

#31DDA5

RGB

rgb(49, 221, 165)

HSL

hsl(160, 72%, 53%)

HSB

hsb(160, 78%, 87%)

CMYK

cmyk(78%, 0%, 25%, 13%)

Oklch

oklch(80.0% 0.157 165.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

341F48

32471F

Analogous

1F1F47

341F48

471F47

Triadic

341F48

47341F

1F4734

Split-Comp.

341F48

47471F

1F471F

Tetradic

341F48

471F1F

32471F

1F4747

Contrast Matrix WCAG 2.1 Contrast

341F48	45444A	7C7763	5AA483	31DDA5
—	1.5 Fail	3.3 AA Large	4.9 AA	8.4 AAA
1.5 Fail	—	2.1 Fail	3.2 AA Large	5.5 AA
3.3 AA Large	2.1 Fail	—	1.5 Fail	2.6 Fail
4.9 AA	3.2 AA Large	1.5 Fail	—	1.7 Fail
8.4 AAA	5.5 AA	2.6 Fail	1.7 Fail	—

White BG

14.6AAA

9.6AAA

4.5AA Large

3.0Fail

1.7Fail

Black BG

1.4Fail

2.2Fail

4.7AA

7.1AAA

12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B3E

454549

7A7A68

7A7B8B

7B7DB3

Deuteranopia

2C2E3C

454548

7A7B69

76708D

7265B6

Tritanopia

333635

454747

7C6C6D

5E9193

3ABDC0

Achromatopsia

2A2A2A

454545

767676

8A8A8A

A3A3A3

Shades & Tints Shades & Tints

#341F48

Dark

Light

#45444A

Dark

Light

#7C7763

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #341f48;
  --color-2: #45444a;
  --color-3: #7c7763;
  --color-4: #5aa483;
  --color-5: #31dda5;
}

SCSS

$color-1: #341f48;
$color-2: #45444a;
$color-3: #7c7763;
$color-4: #5aa483;
$color-5: #31dda5;

TAILWIND

colors: {
  'brand-1': '#341f48',
  'brand-2': '#45444a',
  'brand-3': '#7c7763',
  'brand-4': '#5aa483',
  'brand-5': '#31dda5',
}

RGB Array

[52, 31, 72], [69, 68, 74], [124, 119, 99], [90, 164, 131], [49, 221, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #341F48, #45444A, #7C7763, #5AA483, #31DDA5 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: #341f48; --color-2: #45444a; --color-3: #7c7763; --color-4: #5aa483; --color-5: #31dda5. 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