#163263 + #386385 + #839183 + #388577 + #115C4E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#163263

Indigo · MidnightBlue · Prussian Blue

HEX

#163263

RGB

rgb(22, 50, 99)

HSL

hsl(218, 64%, 24%)

HSB

hsb(218, 78%, 39%)

CMYK

cmyk(78%, 49%, 0%, 61%)

Oklch

oklch(32.5% 0.093 260.7)

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

#386385

Slate Blue · DarkSlateBlue · Prussian Blue

HEX

#386385

RGB

rgb(56, 99, 133)

HSL

hsl(206, 41%, 37%)

HSB

hsb(206, 58%, 52%)

CMYK

cmyk(58%, 26%, 0%, 48%)

Oklch

oklch(48.4% 0.073 244.0)

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

#839183

Ash · Gray · Warm Gray

HEX

#839183

RGB

rgb(131, 145, 131)

HSL

hsl(120, 6%, 54%)

HSB

hsb(120, 10%, 57%)

CMYK

cmyk(10%, 0%, 10%, 43%)

Oklch

oklch(64.1% 0.026 145.3)

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

#388577

Mineral Blue · SeaGreen · Mint Ice

HEX

#388577

RGB

rgb(56, 133, 119)

HSL

hsl(169, 41%, 37%)

HSB

hsb(169, 58%, 52%)

CMYK

cmyk(58%, 0%, 11%, 48%)

Oklch

oklch(56.4% 0.079 179.5)

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

#115C4E

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#115C4E

RGB

rgb(17, 92, 78)

HSL

hsl(169, 69%, 21%)

HSB

hsb(169, 82%, 36%)

CMYK

cmyk(82%, 0%, 15%, 64%)

Oklch

oklch(42.7% 0.073 176.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

163263

644816

Analogous

165A64

163263

201664

Triadic

163263

641633

336416

Split-Comp.

163263

642016

5A6416

Tetradic

163263

64165A

644816

166420

Contrast Matrix WCAG 2.1 Contrast

163263	386385	839183	388577	115C4E
—	2.0 Fail	3.8 AA Large	2.9 Fail	1.6 Fail
2.0 Fail	—	1.9 Fail	1.5 Fail	1.2 Fail
3.8 AA Large	1.9 Fail	—	1.3 Fail	2.4 Fail
2.9 Fail	1.5 Fail	1.3 Fail	—	1.8 Fail
1.6 Fail	1.2 Fail	2.4 Fail	1.8 Fail	—

White BG

12.6AAA

6.4AA

3.3AA Large

4.4AA Large

7.9AAA

Black BG

1.7Fail

3.3AA Large

6.3AA

4.8AA

2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

222257

4B4B7D

898986

595A7A

313251

Deuteranopia

211E54

48457B

888787

554F7B

2D2852

Tritanopia

174E4C

3A7675

84898A

3C7D7E

155455

Achromatopsia

2F2F2F

5A5A5A

8B8B8B

6C6C6C

444444

Shades & Tints Shades & Tints

#163263

Dark

Light

#386385

Dark

Light

#839183

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #163263;
  --color-2: #386385;
  --color-3: #839183;
  --color-4: #388577;
  --color-5: #115c4e;
}

SCSS

$color-1: #163263;
$color-2: #386385;
$color-3: #839183;
$color-4: #388577;
$color-5: #115c4e;

TAILWIND

colors: {
  'brand-1': '#163263',
  'brand-2': '#386385',
  'brand-3': '#839183',
  'brand-4': '#388577',
  'brand-5': '#115c4e',
}

RGB Array

[22, 50, 99], [56, 99, 133], [131, 145, 131], [56, 133, 119], [17, 92, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #163263, #386385, #839183, #388577, #115C4E 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: #163263; --color-2: #386385; --color-3: #839183; --color-4: #388577; --color-5: #115c4e. 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