← Back to Editor

#172214 · #3E4438 · #44522F · #718351 · #9AAB9B

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremium

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#172214

Celadon · Black · Dark Green

HEX
#172214
RGB
rgb(23, 34, 20)
HSL
hsl(107, 26%, 11%)
HSB
hsb(107, 41%, 13%)
CMYK
cmyk(32%, 0%, 41%, 87%)
Oklch
oklch(23.7% 0.030 139.1)

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

#3E4438

Celadon · DarkSlateGray · Forest Green

HEX
#3E4438
RGB
rgb(62, 68, 56)
HSL
hsl(90, 10%, 24%)
HSB
hsb(90, 18%, 27%)
CMYK
cmyk(9%, 0%, 18%, 73%)
Oklch
oklch(37.7% 0.021 129.1)

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

#44522F

Grass Green · DarkOliveGreen · Forest Green

HEX
#44522F
RGB
rgb(68, 82, 47)
HSL
hsl(84, 27%, 25%)
HSB
hsb(84, 43%, 32%)
CMYK
cmyk(17%, 0%, 43%, 68%)
Oklch
oklch(41.7% 0.057 126.5)

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

#718351

Grass Green · DimGray · Olive Green

HEX
#718351
RGB
rgb(113, 131, 81)
HSL
hsl(82, 24%, 42%)
HSB
hsb(82, 38%, 51%)
CMYK
cmyk(14%, 0%, 38%, 49%)
Oklch
oklch(58.3% 0.075 124.8)

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

#9AAB9B

Celadon · DarkGray · Silver Sand

HEX
#9AAB9B
RGB
rgb(154, 171, 155)
HSL
hsl(124, 9%, 64%)
HSB
hsb(124, 10%, 67%)
CMYK
cmyk(10%, 0%, 9%, 33%)
Oklch
oklch(72.3% 0.030 146.9)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

172214
201523

Analogous

1F2315
172214
152319

Triadic

172214
151823
231518

Split-Comp.

172214
191523
23151F

Tetradic

172214
151F23
201523
231915

Contrast Matrix WCAG 2.1 Contrast

172214
3E4438
44522F
718351
9AAB9B
—
1.6
Fail
2.0
Fail
4.0
AA Large
6.8
AA
1.6
Fail
—
1.2
Fail
2.4
Fail
4.2
AA Large
2.0
Fail
1.2
Fail
—
2.0
Fail
3.5
AA Large
4.0
AA Large
2.4
Fail
2.0
Fail
—
1.7
Fail
6.8
AA
4.2
AA Large
3.5
AA Large
1.7
Fail
—
White BG
16.5AAA
10.1AAA
8.4AAA
4.1AA Large
2.4Fail
Black BG
1.3Fail
2.1Fail
2.5Fail
5.1AA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1C1C17
41413B
4A4A37
79795D
A1A29F

Deuteranopia

1B1A18
40403C
49483A
787660
A09FA0

Tritanopia

181A1B
3E3D3E
453E40
726769
9BA2A3

Achromatopsia

1D1D1D
414141
4A4A4A
787878
A4A4A4

Shades & Tints Shades & Tints

#172214

Dark
Light

#3E4438

Dark
Light

#44522F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #172214;
  --color-2: #3e4438;
  --color-3: #44522f;
  --color-4: #718351;
  --color-5: #9aab9b;
}

SCSS

$color-1: #172214;
$color-2: #3e4438;
$color-3: #44522f;
$color-4: #718351;
$color-5: #9aab9b;

TAILWIND

colors: {
  'brand-1': '#172214',
  'brand-2': '#3e4438',
  'brand-3': '#44522f',
  'brand-4': '#718351',
  'brand-5': '#9aab9b',
}

RGB Array

[23, 34, 20], [62, 68, 56], [68, 82, 47], [113, 131, 81], [154, 171, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #172214, #3E4438, #44522F, #718351, #9AAB9B is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #172214; --color-2: #3e4438; --color-3: #44522f; --color-4: #718351; --color-5: #9aab9b. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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