#3D667C + #2F5061 + #243D4A + #192A33 + #0F181C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3D667C

Slate Blue · DarkSlateBlue · Prussian Blue

HEX

#3D667C

RGB

rgb(61, 102, 124)

HSL

hsl(201, 34%, 36%)

HSB

hsb(201, 51%, 49%)

CMYK

cmyk(51%, 18%, 0%, 51%)

Oklch

oklch(48.9% 0.058 233.1)

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

#2F5061

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#2F5061

RGB

rgb(47, 80, 97)

HSL

hsl(200, 35%, 28%)

HSB

hsb(200, 52%, 38%)

CMYK

cmyk(52%, 18%, 0%, 62%)

Oklch

oklch(41.3% 0.048 232.0)

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

#243D4A

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#243D4A

RGB

rgb(36, 61, 74)

HSL

hsl(201, 35%, 22%)

HSB

hsb(201, 51%, 29%)

CMYK

cmyk(51%, 18%, 0%, 71%)

Oklch

oklch(34.6% 0.038 232.1)

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

#192A33

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX

#192A33

RGB

rgb(25, 42, 51)

HSL

hsl(201, 34%, 15%)

HSB

hsb(201, 51%, 20%)

CMYK

cmyk(51%, 18%, 0%, 80%)

Oklch

oklch(27.4% 0.028 232.3)

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

#0F181C

Slate Blue · Black · Peacock Green

HEX

#0F181C

RGB

rgb(15, 24, 28)

HSL

hsl(198, 30%, 8%)

HSB

hsb(198, 46%, 11%)

CMYK

cmyk(46%, 14%, 0%, 89%)

Oklch

oklch(20.2% 0.015 227.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D667C

7B523D

Analogous

3D7B72

3D667C

3D467B

Triadic

3D667C

7B3D65

657B3D

Split-Comp.

3D667C

7B3D46

7B723D

Tetradic

3D667C

723D7B

7B523D

467B3D

Contrast Matrix WCAG 2.1 Contrast

3D667C	2F5061	243D4A	192A33	0F181C
—	1.4 Fail	1.8 Fail	2.4 Fail	2.9 Fail
1.4 Fail	—	1.3 Fail	1.7 Fail	2.1 Fail
1.8 Fail	1.3 Fail	—	1.3 Fail	1.6 Fail
2.4 Fail	1.7 Fail	1.3 Fail	—	1.2 Fail
2.9 Fail	2.1 Fail	1.6 Fail	1.2 Fail	—

White BG

6.2AA

8.6AAA

11.4AAA

14.8AAA

18.0AAA

Black BG

3.4AA Large

2.4Fail

1.8Fail

1.4Fail

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F77

3D3E5D

2F2F47

202131

13131B

Deuteranopia

4C4975

3B395C

2D2C46

1F1E30

12121B

Tritanopia

3F7272

315A59

254444

1A2F2F

0F1A1A

Achromatopsia

5C5C5C

484848

373737

262626

161616

Shades & Tints Shades & Tints

#3D667C

Dark

Light

#2F5061

Dark

Light

#243D4A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d667c;
  --color-2: #2f5061;
  --color-3: #243d4a;
  --color-4: #192a33;
  --color-5: #0f181c;
}

SCSS

$color-1: #3d667c;
$color-2: #2f5061;
$color-3: #243d4a;
$color-4: #192a33;
$color-5: #0f181c;

TAILWIND

colors: {
  'brand-1': '#3d667c',
  'brand-2': '#2f5061',
  'brand-3': '#243d4a',
  'brand-4': '#192a33',
  'brand-5': '#0f181c',
}

RGB Array

[61, 102, 124], [47, 80, 97], [36, 61, 74], [25, 42, 51], [15, 24, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D667C, #2F5061, #243D4A, #192A33, #0F181C 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: #3d667c; --color-2: #2f5061; --color-3: #243d4a; --color-4: #192a33; --color-5: #0f181c. 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