#151316 + #12171B + #2B4A45 + #0F3540 + #052125 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#151316

Ink Black · Black · Jet Black

HEX

#151316

RGB

rgb(21, 19, 22)

HSL

hsl(280, 7%, 8%)

HSB

hsb(280, 14%, 9%)

CMYK

cmyk(5%, 14%, 0%, 91%)

Oklch

oklch(19.0% 0.007 314.7)

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

#12171B

Slate Blue · Black · Deep Sea Blue

HEX

#12171B

RGB

rgb(18, 23, 27)

HSL

hsl(207, 20%, 9%)

HSB

hsb(207, 33%, 11%)

CMYK

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

Oklch

oklch(20.1% 0.011 242.3)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#2B4A45

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#2B4A45

RGB

rgb(43, 74, 69)

HSL

hsl(170, 26%, 23%)

HSB

hsb(170, 42%, 29%)

CMYK

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

Oklch

oklch(38.3% 0.038 182.9)

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

#0F3540

Lake Blue · DarkSlateGray · Peacock Green

HEX

#0F3540

RGB

rgb(15, 53, 64)

HSL

hsl(193, 62%, 15%)

HSB

hsb(193, 77%, 25%)

CMYK

cmyk(77%, 17%, 0%, 75%)

Oklch

oklch(30.8% 0.046 220.6)

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

#052125

Lake Blue · Black · Peacock Green

HEX

#052125

RGB

rgb(5, 33, 37)

HSL

hsl(188, 76%, 8%)

HSB

hsb(188, 86%, 15%)

CMYK

cmyk(86%, 11%, 0%, 85%)

Oklch

oklch(22.9% 0.034 208.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

151316

141613

Analogous

131316

151316

161315

Triadic

151316

161513

131615

Split-Comp.

151316

151613

131613

Tetradic

151316

161313

141613

131516

Contrast Matrix WCAG 2.1 Contrast

151316	12171B	2B4A45	0F3540	052125
—	1.0 Fail	1.9 Fail	1.4 Fail	1.1 Fail
1.0 Fail	—	1.9 Fail	1.4 Fail	1.1 Fail
1.9 Fail	1.9 Fail	—	1.4 Fail	1.7 Fail
1.4 Fail	1.4 Fail	1.4 Fail	—	1.3 Fail
1.1 Fail	1.1 Fail	1.7 Fail	1.3 Fail	—

White BG

18.5AAA

18.0AAA

9.7AAA

13.1AAA

16.8AAA

Black BG

1.1Fail

1.2Fail

2.2Fail

1.6Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

141415

14141A

383946

1F203D

111124

Deuteranopia

141415

14141A

373447

1D1A3D

100D24

Tritanopia

151515

121919

2D4747

113B3B

062323

Achromatopsia

141414

161616

404040

2B2B2B

191919

Shades & Tints Shades & Tints

#151316

Dark

Light

#12171B

Dark

Light

#2B4A45

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #151316;
  --color-2: #12171b;
  --color-3: #2b4a45;
  --color-4: #0f3540;
  --color-5: #052125;
}

SCSS

$color-1: #151316;
$color-2: #12171b;
$color-3: #2b4a45;
$color-4: #0f3540;
$color-5: #052125;

TAILWIND

colors: {
  'brand-1': '#151316',
  'brand-2': '#12171b',
  'brand-3': '#2b4a45',
  'brand-4': '#0f3540',
  'brand-5': '#052125',
}

RGB Array

[21, 19, 22], [18, 23, 27], [43, 74, 69], [15, 53, 64], [5, 33, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #151316, #12171B, #2B4A45, #0F3540, #052125 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: #151316; --color-2: #12171b; --color-3: #2b4a45; --color-4: #0f3540; --color-5: #052125. 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