#09080F + #353538 + #B8A921 + #050B1C + #24354A · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#09080F

Deep Indigo · Black · Deep Sea Blue

HEX

#09080F

RGB

rgb(9, 8, 15)

HSL

hsl(249, 30%, 5%)

HSB

hsb(249, 47%, 6%)

CMYK

cmyk(40%, 47%, 0%, 94%)

Oklch

oklch(14.0% 0.016 291.3)

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

#353538

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#353538

RGB

rgb(53, 53, 56)

HSL

hsl(240, 3%, 21%)

HSB

hsb(240, 5%, 22%)

CMYK

cmyk(5%, 5%, 0%, 78%)

Oklch

oklch(33.0% 0.005 286.1)

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

#B8A921

Autumn Sage · GoldenRod · Honey Gold

HEX

#B8A921

RGB

rgb(184, 169, 33)

HSL

hsl(54, 70%, 43%)

HSB

hsb(54, 82%, 72%)

CMYK

cmyk(0%, 8%, 82%, 28%)

Oklch

oklch(72.6% 0.144 102.6)

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

#050B1C

Indigo · Black · Deep Sea Blue

HEX

#050B1C

RGB

rgb(5, 11, 28)

HSL

hsl(224, 70%, 6%)

HSB

hsb(224, 82%, 11%)

CMYK

cmyk(82%, 61%, 0%, 89%)

Oklch

oklch(15.4% 0.038 265.3)

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

#24354A

Indigo · DarkSlateGray · Prussian Blue

HEX

#24354A

RGB

rgb(36, 53, 74)

HSL

hsl(213, 35%, 22%)

HSB

hsb(213, 51%, 29%)

CMYK

cmyk(51%, 28%, 0%, 71%)

Oklch

oklch(32.4% 0.044 254.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

09080F

0F1109

Analogous

090C11

09080F

0E0911

Triadic

09080F

110A09

09110A

Split-Comp.

09080F

110E09

0C1109

Tetradic

09080F

11090C

0F1109

09110E

Contrast Matrix WCAG 2.1 Contrast

09080F	353538	B8A921	050B1C	24354A
—	1.6 Fail	8.3 AAA	1.0 Fail	1.6 Fail
1.6 Fail	—	5.1 AA	1.6 Fail	1.0 Fail
8.3 AAA	5.1 AA	—	8.2 AAA	5.2 AA
1.0 Fail	1.6 Fail	8.2 AAA	—	1.6 Fail
1.6 Fail	1.0 Fail	5.2 AA	1.6 Fail	—

White BG

19.9AAA

12.2AAA

2.4Fail

19.6AAA

12.5AAA

Black BG

1.1Fail

1.7Fail

8.7AAA

1.1Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

09090D

353537

B2B142

080818

2B2C45

Deuteranopia

09090D

353537

B2B34A

070717

2A2944

Tritanopia

090C0C

353737

B75C62

051514

254140

Achromatopsia

090909

353535

9E9E9E

0B0B0B

323232

Shades & Tints Shades & Tints

#09080F

Dark

Light

#353538

Dark

Light

#B8A921

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #09080f;
  --color-2: #353538;
  --color-3: #b8a921;
  --color-4: #050b1c;
  --color-5: #24354a;
}

SCSS

$color-1: #09080f;
$color-2: #353538;
$color-3: #b8a921;
$color-4: #050b1c;
$color-5: #24354a;

TAILWIND

colors: {
  'brand-1': '#09080f',
  'brand-2': '#353538',
  'brand-3': '#b8a921',
  'brand-4': '#050b1c',
  'brand-5': '#24354a',
}

RGB Array

[9, 8, 15], [53, 53, 56], [184, 169, 33], [5, 11, 28], [36, 53, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #09080F, #353538, #B8A921, #050B1C, #24354A 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: #09080f; --color-2: #353538; --color-3: #b8a921; --color-4: #050b1c; --color-5: #24354a. 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