← Back to Editor

#204150 · #171218 · #343B3D · #929A73 · #C5D609

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#204150

Slate Blue · DarkSlateGray · Peacock Green

HEX
#204150
RGB
rgb(32, 65, 80)
HSL
hsl(199, 43%, 22%)
HSB
hsb(199, 60%, 31%)
CMYK
cmyk(60%, 19%, 0%, 69%)
Oklch
oklch(35.7% 0.047 229.5)

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

#171218

Dark Plum · Black · Dark Purple

HEX
#171218
RGB
rgb(23, 18, 24)
HSL
hsl(290, 14%, 8%)
HSB
hsb(290, 25%, 9%)
CMYK
cmyk(4%, 25%, 0%, 91%)
Oklch
oklch(19.1% 0.014 320.6)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#343B3D

Slate Blue · DarkSlateGray · Dark Stone

HEX
#343B3D
RGB
rgb(52, 59, 61)
HSL
hsl(193, 8%, 22%)
HSB
hsb(193, 15%, 24%)
CMYK
cmyk(15%, 3%, 0%, 76%)
Oklch
oklch(34.7% 0.010 216.8)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#929A73

Grass Green · Gray · Olive Green

HEX
#929A73
RGB
rgb(146, 154, 115)
HSL
hsl(72, 16%, 53%)
HSB
hsb(72, 25%, 60%)
CMYK
cmyk(5%, 0%, 25%, 40%)
Oklch
oklch(66.9% 0.056 117.3)

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

#C5D609

Autumn Sage · GoldenRod · Honey Gold

HEX
#C5D609
RGB
rgb(197, 214, 9)
HSL
hsl(65, 92%, 44%)
HSB
hsb(65, 96%, 84%)
CMYK
cmyk(8%, 0%, 96%, 16%)
Oklch
oklch(83.5% 0.189 115.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

204150
502F20

Analogous

205047
204150
202950

Triadic

204150
502041
415020

Split-Comp.

204150
502029
504720

Tetradic

204150
472050
502F20
295020

Contrast Matrix WCAG 2.1 Contrast

204150
171218
343B3D
929A73
C5D609
—
1.7
Fail
1.1
Fail
3.7
AA Large
6.7
AA
1.7
Fail
—
1.6
Fail
6.2
AA
11.4
AAA
1.1
Fail
1.6
Fail
—
3.9
AA Large
7.1
AAA
3.7
AA Large
6.2
AA
3.9
AA Large
—
1.8
Fail
6.7
AA
11.4
AAA
7.1
AAA
1.8
Fail
—
White BG
10.9AAA
18.5AAA
11.4AAA
3.0Fail
1.6Fail
Black BG
1.9Fail
1.1Fail
1.8Fail
7.1AAA
13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2F4C
151517
37373D
95967C
CCCD3B

Deuteranopia

2C2A4C
151516
37363C
95947F
CBCA47

Tritanopia

224A49
171515
343C3C
928486
C6626A

Achromatopsia

393939
141414
393939
939393
BABABA

Shades & Tints Shades & Tints

#204150

Dark
Light

#171218

Dark
Light

#343B3D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #204150;
  --color-2: #171218;
  --color-3: #343b3d;
  --color-4: #929a73;
  --color-5: #c5d609;
}

SCSS

$color-1: #204150;
$color-2: #171218;
$color-3: #343b3d;
$color-4: #929a73;
$color-5: #c5d609;

TAILWIND

colors: {
  'brand-1': '#204150',
  'brand-2': '#171218',
  'brand-3': '#343b3d',
  'brand-4': '#929a73',
  'brand-5': '#c5d609',
}

RGB Array

[32, 65, 80], [23, 18, 24], [52, 59, 61], [146, 154, 115], [197, 214, 9]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #204150, #171218, #343B3D, #929A73, #C5D609 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #204150; --color-2: #171218; --color-3: #343b3d; --color-4: #929a73; --color-5: #c5d609. 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 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