#1B1917 + #405654 + #B48527 + #D22921 + #332335 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1B1917

Ochre · Black · Jet Black

HEX

#1B1917

RGB

rgb(27, 25, 23)

HSL

hsl(30, 8%, 10%)

HSB

hsb(30, 15%, 11%)

CMYK

cmyk(0%, 7%, 15%, 89%)

Oklch

oklch(21.5% 0.005 67.6)

Traditional「Ochre」· Paint「Jet Black」· Creative Midnight Shadow

#405654

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#405654

RGB

rgb(64, 86, 84)

HSL

hsl(175, 15%, 29%)

HSB

hsb(175, 26%, 34%)

CMYK

cmyk(26%, 0%, 2%, 66%)

Oklch

oklch(43.4% 0.027 189.3)

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

#B48527

Ochre · DarkGoldenRod · Honey Gold

HEX

#B48527

RGB

rgb(180, 133, 39)

HSL

hsl(40, 64%, 43%)

HSB

hsb(40, 78%, 71%)

CMYK

cmyk(0%, 26%, 78%, 29%)

Oklch

oklch(64.7% 0.120 80.2)

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

#D22921

Vermilion · FireBrick · Passion Red

HEX

#D22921

RGB

rgb(210, 41, 33)

HSL

hsl(3, 73%, 48%)

HSB

hsb(3, 84%, 82%)

CMYK

cmyk(0%, 80%, 84%, 18%)

Oklch

oklch(56.0% 0.205 28.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#332335

Dark Plum · DarkSlateGray · Dark Purple

HEX

#332335

RGB

rgb(51, 35, 53)

HSL

hsl(293, 20%, 17%)

HSB

hsb(293, 34%, 21%)

CMYK

cmyk(4%, 34%, 0%, 79%)

Oklch

oklch(28.3% 0.039 322.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1B1917

171A1C

Analogous

1C1717

1B1917

1C1C17

Triadic

1B1917

171C1A

1A171C

Split-Comp.

1B1917

171C1C

17171C

Tetradic

1B1917

171C17

171A1C

1C171C

Contrast Matrix WCAG 2.1 Contrast

1B1917	405654	B48527	D22921	332335
—	2.2 Fail	5.3 AA	3.4 AA Large	1.2 Fail
2.2 Fail	—	2.4 Fail	1.5 Fail	1.9 Fail
5.3 AA	2.4 Fail	—	1.6 Fail	4.4 AA Large
3.4 AA Large	1.5 Fail	1.6 Fail	—	2.8 Fail
1.2 Fail	1.9 Fail	4.4 AA Large	2.8 Fail	—

White BG

17.5AAA

7.8AAA

3.3AA Large

5.1AA

14.7AAA

Black BG

1.2Fail

2.7Fail

6.3AA

4.1AA Large

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

1A1A17

4A4A54

A09F3E

898723

2C2C31

Deuteranopia

1A1A18

484755

A2A643

939F23

2D2E30

Tritanopia

1B1818

415555

B25054

CA2425

322D2C

Achromatopsia

191919

4F4F4F

888888

5B5B5B

2A2A2A

Shades & Tints Shades & Tints

#1B1917

Dark

Light

#405654

Dark

Light

#B48527

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1b1917;
  --color-2: #405654;
  --color-3: #b48527;
  --color-4: #d22921;
  --color-5: #332335;
}

SCSS

$color-1: #1b1917;
$color-2: #405654;
$color-3: #b48527;
$color-4: #d22921;
$color-5: #332335;

TAILWIND

colors: {
  'brand-1': '#1b1917',
  'brand-2': '#405654',
  'brand-3': '#b48527',
  'brand-4': '#d22921',
  'brand-5': '#332335',
}

RGB Array

[27, 25, 23], [64, 86, 84], [180, 133, 39], [210, 41, 33], [51, 35, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1B1917, #405654, #B48527, #D22921, #332335 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: #1b1917; --color-2: #405654; --color-3: #b48527; --color-4: #d22921; --color-5: #332335. 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