← Back to Editor

#333C45 · #565555 · #7E6D6C · #A68584 · #7B0E49

dark

A 5-color dark palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#333C45

Indigo · DarkSlateGray · Prussian Blue

HEX
#333C45
RGB
rgb(51, 60, 69)
HSL
hsl(210, 15%, 24%)
HSB
hsb(210, 26%, 27%)
CMYK
cmyk(26%, 13%, 0%, 73%)
Oklch
oklch(35.2% 0.020 248.4)

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

#565555

Ink Gray · DimGray · Charcoal

HEX
#565555
RGB
rgb(86, 85, 85)
HSL
hsl(0, 1%, 34%)
HSB
hsb(0, 1%, 34%)
CMYK
cmyk(0%, 1%, 1%, 66%)
Oklch
oklch(45.0% 0.001 17.2)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#7E6D6C

Crimson · DimGray · Warm Gray

HEX
#7E6D6C
RGB
rgb(126, 109, 108)
HSL
hsl(3, 8%, 46%)
HSB
hsb(3, 14%, 49%)
CMYK
cmyk(0%, 13%, 14%, 51%)
Oklch
oklch(55.0% 0.022 21.8)

Traditional「Crimson」· Paint「Warm Gray」· Creative Urban Concrete

#A68584

Crimson · Gray · Passion Red

HEX
#A68584
RGB
rgb(166, 133, 132)
HSL
hsl(2, 16%, 58%)
HSB
hsb(2, 20%, 65%)
CMYK
cmyk(0%, 20%, 20%, 35%)
Oklch
oklch(64.7% 0.041 20.3)

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

#7B0E49

Rose Purple · Purple · Camellia

HEX
#7B0E49
RGB
rgb(123, 14, 73)
HSL
hsl(328, 80%, 27%)
HSB
hsb(328, 89%, 48%)
CMYK
cmyk(0%, 89%, 41%, 52%)
Oklch
oklch(38.8% 0.148 354.6)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

333C45
463D34

Analogous

344646
333C45
343446

Triadic

333C45
46343D
3D4634

Split-Comp.

333C45
463434
464634

Tetradic

333C45
463446
463D34
344634

Contrast Matrix WCAG 2.1 Contrast

333C45
565555
7E6D6C
A68584
7B0E49
—
1.5
Fail
2.3
Fail
3.4
AA Large
1.1
Fail
1.5
Fail
—
1.5
Fail
2.2
Fail
1.4
Fail
2.3
Fail
1.5
Fail
—
1.5
Fail
2.1
Fail
3.4
AA Large
2.2
Fail
1.5
Fail
—
3.2
AA Large
1.1
Fail
1.4
Fail
2.1
Fail
3.2
AA Large
—
White BG
11.2AAA
7.4AAA
4.9AA
3.3AA Large
10.5AAA
Black BG
1.9Fail
2.8Fail
4.3AA Large
6.3AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

373743
565655
77766C
989784
4C4B3B

Deuteranopia

363642
565655
78796C
9A9C84
525A37

Tritanopia

334141
565555
7D6C6C
A48484
762F2D

Achromatopsia

3A3A3A
555555
727272
8F8F8F
353535

Shades & Tints Shades & Tints

#333C45

Dark
Light

#565555

Dark
Light

#7E6D6C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #333c45;
  --color-2: #565555;
  --color-3: #7e6d6c;
  --color-4: #a68584;
  --color-5: #7b0e49;
}

SCSS

$color-1: #333c45;
$color-2: #565555;
$color-3: #7e6d6c;
$color-4: #a68584;
$color-5: #7b0e49;

TAILWIND

colors: {
  'brand-1': '#333c45',
  'brand-2': '#565555',
  'brand-3': '#7e6d6c',
  'brand-4': '#a68584',
  'brand-5': '#7b0e49',
}

RGB Array

[51, 60, 69], [86, 85, 85], [126, 109, 108], [166, 133, 132], [123, 14, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #333C45, #565555, #7E6D6C, #A68584, #7B0E49 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #333c45; --color-2: #565555; --color-3: #7e6d6c; --color-4: #a68584; --color-5: #7b0e49. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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