#402937 + #344B66 + #318C72 + #6BB324 + #D9C80B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#402937

Rose Purple · DarkSlateGray · Raspberry

HEX

#402937

RGB

rgb(64, 41, 55)

HSL

hsl(323, 22%, 21%)

HSB

hsb(323, 36%, 25%)

CMYK

cmyk(0%, 36%, 14%, 75%)

Oklch

oklch(31.4% 0.041 342.6)

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

#344B66

Indigo · DarkSlateGray · Prussian Blue

HEX

#344B66

RGB

rgb(52, 75, 102)

HSL

hsl(212, 32%, 30%)

HSB

hsb(212, 49%, 40%)

CMYK

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

Oklch

oklch(40.6% 0.054 253.0)

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

#318C72

Mineral Blue · SeaGreen · Mint Ice

HEX

#318C72

RGB

rgb(49, 140, 114)

HSL

hsl(163, 48%, 37%)

HSB

hsb(163, 65%, 55%)

CMYK

cmyk(65%, 0%, 19%, 45%)

Oklch

oklch(57.9% 0.095 170.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#6BB324

Pine Green · LimeGreen · Olive Green

HEX

#6BB324

RGB

rgb(107, 179, 36)

HSL

hsl(90, 67%, 42%)

HSB

hsb(90, 80%, 70%)

CMYK

cmyk(40%, 0%, 80%, 30%)

Oklch

oklch(69.3% 0.183 133.4)

Traditional「Pine Green」· Paint「Olive Green」· Creative Blush Sunrise

#D9C80B

Autumn Sage · GoldenRod · Honey Gold

HEX

#D9C80B

RGB

rgb(217, 200, 11)

HSL

hsl(55, 90%, 45%)

HSB

hsb(55, 95%, 85%)

CMYK

cmyk(0%, 8%, 95%, 15%)

Oklch

oklch(82.1% 0.171 103.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

402937

2A4133

Analogous

3F2A41

402937

412A2D

Triadic

402937

38412A

2A3841

Split-Comp.

402937

2D412A

2A413F

Tetradic

402937

413F2A

2A4133

2A2D41

Contrast Matrix WCAG 2.1 Contrast

402937	344B66	318C72	6BB324	D9C80B
—	1.5 Fail	3.2 AA Large	5.1 AA	7.7 AAA
1.5 Fail	—	2.2 Fail	3.5 AA Large	5.2 AA
3.2 AA Large	2.2 Fail	—	1.6 Fail	2.4 Fail
5.1 AA	3.5 AA Large	1.6 Fail	—	1.5 Fail
7.7 AAA	5.2 AA	2.4 Fail	1.5 Fail	—

White BG

13.2AAA

9.0AAA

4.1AA Large

2.6Fail

1.7Fail

Black BG

1.6Fail

2.3Fail

5.1AA

8.1AAA

12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

363634

3E3E5F

585978

8A8B47

D2D139

Deuteranopia

373933

3D3B5E

534C7A

86814F

D3D444

Tritanopia

3F3130

355A59

367D7E

6F6268

D85D65

Achromatopsia

313131

474747

6E6E6E

8D8D8D

B8B8B8

Shades & Tints Shades & Tints

#402937

Dark

Light

#344B66

Dark

Light

#318C72

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #402937;
  --color-2: #344b66;
  --color-3: #318c72;
  --color-4: #6bb324;
  --color-5: #d9c80b;
}

SCSS

$color-1: #402937;
$color-2: #344b66;
$color-3: #318c72;
$color-4: #6bb324;
$color-5: #d9c80b;

TAILWIND

colors: {
  'brand-1': '#402937',
  'brand-2': '#344b66',
  'brand-3': '#318c72',
  'brand-4': '#6bb324',
  'brand-5': '#d9c80b',
}

RGB Array

[64, 41, 55], [52, 75, 102], [49, 140, 114], [107, 179, 36], [217, 200, 11]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #402937, #344B66, #318C72, #6BB324, #D9C80B 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: #402937; --color-2: #344b66; --color-3: #318c72; --color-4: #6bb324; --color-5: #d9c80b. 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