#878A6B + #2381D9 + #325678 + #525436 + #3F4038 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#878A6B

Autumn Sage · Gray · Honey Gold

HEX

#878A6B

RGB

rgb(135, 138, 107)

HSL

hsl(66, 13%, 48%)

HSB

hsb(66, 22%, 54%)

CMYK

cmyk(2%, 0%, 22%, 46%)

Oklch

oklch(62.2% 0.045 112.2)

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

#2381D9

Lake Blue · DodgerBlue · Navy Blue

HEX

#2381D9

RGB

rgb(35, 129, 217)

HSL

hsl(209, 72%, 49%)

HSB

hsb(209, 84%, 85%)

CMYK

cmyk(84%, 41%, 0%, 15%)

Oklch

oklch(59.6% 0.158 251.5)

Traditional「Lake Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#325678

Slate Blue · DarkSlateBlue · Prussian Blue

HEX

#325678

RGB

rgb(50, 86, 120)

HSL

hsl(209, 41%, 33%)

HSB

hsb(209, 58%, 47%)

CMYK

cmyk(58%, 28%, 0%, 53%)

Oklch

oklch(44.2% 0.070 248.4)

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

#525436

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#525436

RGB

rgb(82, 84, 54)

HSL

hsl(64, 22%, 27%)

HSB

hsb(64, 36%, 33%)

CMYK

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

Oklch

oklch(43.6% 0.046 111.4)

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

#3F4038

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#3F4038

RGB

rgb(63, 64, 56)

HSL

hsl(67, 7%, 24%)

HSB

hsb(67, 13%, 25%)

CMYK

cmyk(2%, 0%, 13%, 75%)

Oklch

oklch(36.8% 0.013 112.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

878A6B

6E6A8A

Analogous

8A7E6A

878A6B

778A6A

Triadic

878A6B

6A878A

8A6A87

Split-Comp.

878A6B

6A778A

7E6A8A

Tetradic

878A6B

6A8A7E

6E6A8A

8A6A77

Contrast Matrix WCAG 2.1 Contrast

878A6B	2381D9	325678	525436	3F4038
—	1.1 Fail	2.1 Fail	2.2 Fail	2.9 Fail
1.1 Fail	—	1.9 Fail	1.9 Fail	2.6 Fail
2.1 Fail	1.9 Fail	—	1.0 Fail	1.4 Fail
2.2 Fail	1.9 Fail	1.0 Fail	—	1.3 Fail
2.9 Fail	2.6 Fail	1.4 Fail	1.3 Fail	—

White BG

3.6AA Large

4.0AA Large

7.7AAA

7.8AAA

10.5AAA

Black BG

5.9AA

5.2AA

2.7Fail

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

888873

4C4DC4

424270

53533D

3F3F3A

Deuteranopia

888874

463FBF

403D6E

53533F

3F3F3A

Tritanopia

87787A

28B3AF

346968

524344

3F3B3C

Achromatopsia

868686

6F6F6F

4F4F4F

505050

3F3F3F

Shades & Tints Shades & Tints

#878A6B

Dark

Light

#2381D9

Dark

Light

#325678

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #878a6b;
  --color-2: #2381d9;
  --color-3: #325678;
  --color-4: #525436;
  --color-5: #3f4038;
}

SCSS

$color-1: #878a6b;
$color-2: #2381d9;
$color-3: #325678;
$color-4: #525436;
$color-5: #3f4038;

TAILWIND

colors: {
  'brand-1': '#878a6b',
  'brand-2': '#2381d9',
  'brand-3': '#325678',
  'brand-4': '#525436',
  'brand-5': '#3f4038',
}

RGB Array

[135, 138, 107], [35, 129, 217], [50, 86, 120], [82, 84, 54], [63, 64, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #878A6B, #2381D9, #325678, #525436, #3F4038 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: #878a6b; --color-2: #2381d9; --color-3: #325678; --color-4: #525436; --color-5: #3f4038. 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