← Back to Editor

#687355 · #5B634B · #425349 · #3B3946 · #21212B

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#687355

Grass Green · DimGray · Forest Green

HEX
#687355
RGB
rgb(104, 115, 85)
HSL
hsl(82, 15%, 39%)
HSB
hsb(82, 26%, 45%)
CMYK
cmyk(10%, 0%, 26%, 55%)
Oklch
oklch(53.8% 0.047 124.3)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#5B634B

Grass Green · DarkOliveGreen · Forest Green

HEX
#5B634B
RGB
rgb(91, 99, 75)
HSL
hsl(80, 14%, 34%)
HSB
hsb(80, 24%, 39%)
CMYK
cmyk(8%, 0%, 24%, 61%)
Oklch
oklch(48.6% 0.038 122.8)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#425349

Celadon · DarkSlateGray · Forest Green

HEX
#425349
RGB
rgb(66, 83, 73)
HSL
hsl(145, 11%, 29%)
HSB
hsb(145, 20%, 33%)
CMYK
cmyk(20%, 0%, 12%, 67%)
Oklch
oklch(42.4% 0.027 159.2)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#3B3946

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3B3946
RGB
rgb(59, 57, 70)
HSL
hsl(249, 10%, 25%)
HSB
hsb(249, 19%, 27%)
CMYK
cmyk(16%, 19%, 0%, 73%)
Oklch
oklch(35.2% 0.022 292.3)

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

#21212B

Deep Indigo · DarkSlateGray · Deep Sea Blue

HEX
#21212B
RGB
rgb(33, 33, 43)
HSL
hsl(240, 13%, 15%)
HSB
hsb(240, 23%, 17%)
CMYK
cmyk(23%, 23%, 0%, 83%)
Oklch
oklch(25.2% 0.019 285.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

687355
5F5572

Analogous

726E55
687355
597255

Triadic

687355
556772
725567

Split-Comp.

687355
555972
6E5572

Tetradic

687355
55726E
5F5572
725559

Contrast Matrix WCAG 2.1 Contrast

687355
5B634B
425349
3B3946
21212B
—
1.3
Fail
1.6
Fail
2.2
Fail
3.2
AA Large
1.3
Fail
—
1.3
Fail
1.8
Fail
2.5
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
1.9
Fail
2.2
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
3.2
AA Large
2.5
Fail
1.9
Fail
1.4
Fail
—
White BG
5.0AA
6.3AA
8.2AAA
11.3AAA
15.9AAA
Black BG
4.2AA Large
3.3AA Large
2.6Fail
1.9Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D5C
5E5F51
494A4B
3A3A43
212129

Deuteranopia

6C6B5E
5E5D52
48474C
3A3A42
212128

Tritanopia

696263
5B5556
434D4E
3B4040
212726

Achromatopsia

6C6C6C
5E5E5E
4D4D4D
3B3B3B
222222

Shades & Tints Shades & Tints

#687355

Dark
Light

#5B634B

Dark
Light

#425349

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #687355;
  --color-2: #5b634b;
  --color-3: #425349;
  --color-4: #3b3946;
  --color-5: #21212b;
}

SCSS

$color-1: #687355;
$color-2: #5b634b;
$color-3: #425349;
$color-4: #3b3946;
$color-5: #21212b;

TAILWIND

colors: {
  'brand-1': '#687355',
  'brand-2': '#5b634b',
  'brand-3': '#425349',
  'brand-4': '#3b3946',
  'brand-5': '#21212b',
}

RGB Array

[104, 115, 85], [91, 99, 75], [66, 83, 73], [59, 57, 70], [33, 33, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #687355, #5B634B, #425349, #3B3946, #21212B 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: #687355; --color-2: #5b634b; --color-3: #425349; --color-4: #3b3946; --color-5: #21212b. 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