#14202B + #22343F + #395357 + #5C6348 + #9DBD35 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#14202B

Slate Blue · Black · Deep Sea Blue

HEX

#14202B

RGB

rgb(20, 32, 43)

HSL

hsl(209, 37%, 12%)

HSB

hsb(209, 53%, 17%)

CMYK

cmyk(53%, 26%, 0%, 83%)

Oklch

oklch(23.8% 0.027 246.9)

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

#22343F

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX

#22343F

RGB

rgb(34, 52, 63)

HSL

hsl(203, 30%, 19%)

HSB

hsb(203, 46%, 25%)

CMYK

cmyk(46%, 17%, 0%, 75%)

Oklch

oklch(31.4% 0.031 235.9)

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

#395357

Slate Blue · DarkSlateGray · Mint Ice

HEX

#395357

RGB

rgb(57, 83, 87)

HSL

hsl(188, 21%, 28%)

HSB

hsb(188, 34%, 34%)

CMYK

cmyk(34%, 5%, 0%, 66%)

Oklch

oklch(42.3% 0.032 207.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#5C6348

Grass Green · DarkOliveGreen · Forest Green

HEX

#5C6348

RGB

rgb(92, 99, 72)

HSL

hsl(76, 16%, 34%)

HSB

hsb(76, 27%, 39%)

CMYK

cmyk(7%, 0%, 27%, 61%)

Oklch

oklch(48.6% 0.042 119.8)

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

#9DBD35

Grass Green · GreenYellow · Olive Green

HEX

#9DBD35

RGB

rgb(157, 189, 53)

HSL

hsl(74, 56%, 47%)

HSB

hsb(74, 72%, 74%)

CMYK

cmyk(17%, 0%, 72%, 26%)

Oklch

oklch(75.0% 0.161 122.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

14202B

2A1E13

Analogous

132A2A

14202B

13142A

Triadic

14202B

2A131F

1F2A13

Split-Comp.

14202B

2A1314

2A2A13

Tetradic

14202B

2A132A

2A1E13

142A13

Contrast Matrix WCAG 2.1 Contrast

14202B	22343F	395357	5C6348	9DBD35
—	1.3 Fail	2.0 Fail	2.6 Fail	7.7 AAA
1.3 Fail	—	1.6 Fail	2.0 Fail	6.0 AA
2.0 Fail	1.6 Fail	—	1.3 Fail	3.8 AA Large
2.6 Fail	2.0 Fail	1.3 Fail	—	2.9 Fail
7.7 AAA	6.0 AA	3.8 AA Large	2.9 Fail	—

White BG

16.5AAA

12.9AAA

8.2AAA

6.3AA

2.2Fail

Black BG

1.3Fail

1.6Fail

2.5Fail

3.3AA Large

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

191928

2A2A3C

444456

5F5F4F

ABAB56

Deuteranopia

191828

29273C

434156

5F5E50

A9A75E

Tritanopia

152626

233A3A

3A5555

5C5455

9F7076

Achromatopsia

1E1E1E

303030

4C4C4C

5E5E5E

A4A4A4

Shades & Tints Shades & Tints

#14202B

Dark

Light

#22343F

Dark

Light

#395357

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #14202b;
  --color-2: #22343f;
  --color-3: #395357;
  --color-4: #5c6348;
  --color-5: #9dbd35;
}

SCSS

$color-1: #14202b;
$color-2: #22343f;
$color-3: #395357;
$color-4: #5c6348;
$color-5: #9dbd35;

TAILWIND

colors: {
  'brand-1': '#14202b',
  'brand-2': '#22343f',
  'brand-3': '#395357',
  'brand-4': '#5c6348',
  'brand-5': '#9dbd35',
}

RGB Array

[20, 32, 43], [34, 52, 63], [57, 83, 87], [92, 99, 72], [157, 189, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #14202B, #22343F, #395357, #5C6348, #9DBD35 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: #14202b; --color-2: #22343f; --color-3: #395357; --color-4: #5c6348; --color-5: #9dbd35. 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 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