#2B2B2A + #2D3A46 + #2F4962 + #31577D + #336699 · 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

#2B2B2A

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#2B2B2A

RGB

rgb(43, 43, 42)

HSL

hsl(60, 1%, 17%)

HSB

hsb(60, 2%, 17%)

CMYK

cmyk(0%, 0%, 2%, 83%)

Oklch

oklch(28.9% 0.002 106.5)

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

#2D3A46

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#2D3A46

RGB

rgb(45, 58, 70)

HSL

hsl(209, 22%, 23%)

HSB

hsb(209, 36%, 27%)

CMYK

cmyk(36%, 17%, 0%, 73%)

Oklch

oklch(34.2% 0.027 246.5)

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

#2F4962

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#2F4962

RGB

rgb(47, 73, 98)

HSL

hsl(209, 35%, 28%)

HSB

hsb(209, 52%, 38%)

CMYK

cmyk(52%, 26%, 0%, 62%)

Oklch

oklch(39.6% 0.053 248.4)

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

#31577D

Indigo · DarkSlateBlue · Prussian Blue

HEX

#31577D

RGB

rgb(49, 87, 125)

HSL

hsl(210, 44%, 34%)

HSB

hsb(210, 61%, 49%)

CMYK

cmyk(61%, 30%, 0%, 51%)

Oklch

oklch(44.6% 0.076 249.9)

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

#336699

Indigo · SteelBlue · Prussian Blue

HEX

#336699

RGB

rgb(51, 102, 153)

HSL

hsl(210, 50%, 40%)

HSB

hsb(210, 67%, 60%)

CMYK

cmyk(67%, 33%, 0%, 40%)

Oklch

oklch(49.9% 0.099 250.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B2B2A

2B2B2C

Analogous

2C2B2B

2B2B2A

2B2C2B

Triadic

2B2B2A

2B2C2C

2C2B2C

Split-Comp.

2B2B2A

2B2B2C

Tetradic

2B2B2A

2B2C2B

2B2B2C

2C2B2B

Contrast Matrix WCAG 2.1 Contrast

2B2B2A	2D3A46	2F4962	31577D	336699
—	1.2 Fail	1.5 Fail	1.9 Fail	2.4 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.9 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.6 Fail
1.9 Fail	1.5 Fail	1.2 Fail	—	1.3 Fail
2.4 Fail	1.9 Fail	1.6 Fail	1.3 Fail	—

White BG

14.2AAA

11.6AAA

9.3AAA

7.5AAA

6.0AA

Black BG

1.5Fail

1.8Fail

2.3Fail

2.8Fail

3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B2A

333343

3A3A5C

414274

494A8D

Deuteranopia

2B2B2A

323142

39375B

3F3C72

46428A

Tritanopia

2B2A2A

2E4140

305756

336D6B

368381

Achromatopsia

2B2B2B

373737

444444

505050

5D5D5D

Shades & Tints Shades & Tints

#2B2B2A

Dark

Light

#2D3A46

Dark

Light

#2F4962

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b2b2a;
  --color-2: #2d3a46;
  --color-3: #2f4962;
  --color-4: #31577d;
  --color-5: #336699;
}

SCSS

$color-1: #2b2b2a;
$color-2: #2d3a46;
$color-3: #2f4962;
$color-4: #31577d;
$color-5: #336699;

TAILWIND

colors: {
  'brand-1': '#2b2b2a',
  'brand-2': '#2d3a46',
  'brand-3': '#2f4962',
  'brand-4': '#31577d',
  'brand-5': '#336699',
}

RGB Array

[43, 43, 42], [45, 58, 70], [47, 73, 98], [49, 87, 125], [51, 102, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #2B2B2A, #2D3A46, #2F4962, #31577D, #336699 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: #2b2b2a; --color-2: #2d3a46; --color-3: #2f4962; --color-4: #31577d; --color-5: #336699. 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