#103C47 + #2D3946 + #4A3646 + #673245 + #842F44 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#103C47

Lake Blue · DarkSlateGray · Peacock Green

HEX

#103C47

RGB

rgb(16, 60, 71)

HSL

hsl(192, 63%, 17%)

HSB

hsb(192, 77%, 28%)

CMYK

cmyk(77%, 15%, 0%, 72%)

Oklch

oklch(33.2% 0.050 217.8)

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

#2D3946

Indigo · DarkSlateGray · Prussian Blue

HEX

#2D3946

RGB

rgb(45, 57, 70)

HSL

hsl(211, 22%, 23%)

HSB

hsb(211, 36%, 27%)

CMYK

cmyk(36%, 19%, 0%, 73%)

Oklch

oklch(33.9% 0.028 250.7)

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

#4A3646

Rose Purple · DarkSlateGray · Eggplant

HEX

#4A3646

RGB

rgb(74, 54, 70)

HSL

hsl(312, 16%, 25%)

HSB

hsb(312, 27%, 29%)

CMYK

cmyk(0%, 27%, 5%, 71%)

Oklch

oklch(36.1% 0.038 333.5)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#673245

Dark Violet · DarkOliveGreen · Camellia

HEX

#673245

RGB

rgb(103, 50, 69)

HSL

hsl(338, 35%, 30%)

HSB

hsb(338, 51%, 40%)

CMYK

cmyk(0%, 51%, 33%, 60%)

Oklch

oklch(39.3% 0.079 358.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#842F44

Crimson · Brown · Wine Red

HEX

#842F44

RGB

rgb(132, 47, 68)

HSL

hsl(345, 47%, 35%)

HSB

hsb(345, 64%, 52%)

CMYK

cmyk(0%, 64%, 48%, 48%)

Oklch

oklch(43.4% 0.118 8.3)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

103C47

471B10

Analogous

104736

103C47

102047

Triadic

103C47

47103C

3C4710

Split-Comp.

103C47

471020

473610

Tetradic

103C47

361047

471B10

204710

Contrast Matrix WCAG 2.1 Contrast

103C47	2D3946	4A3646	673245	842F44
—	1.0 Fail	1.1 Fail	1.2 Fail	1.4 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.4 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

11.9AAA

11.8AAA

11.0AAA

9.9AAA

8.5AAA

Black BG

1.8Fail

1.9Fail

2.1Fail

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

232344

323243

414142

505040

5F5E3F

Deuteranopia

211D44

323142

434441

53573F

646A3E

Tritanopia

124242

2E4040

493F3E

643D3C

803B3A

Achromatopsia

303030

373737

3E3E3E

444444

4B4B4B

Shades & Tints Shades & Tints

#103C47

Dark

Light

#2D3946

Dark

Light

#4A3646

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #103c47;
  --color-2: #2d3946;
  --color-3: #4a3646;
  --color-4: #673245;
  --color-5: #842f44;
}

SCSS

$color-1: #103c47;
$color-2: #2d3946;
$color-3: #4a3646;
$color-4: #673245;
$color-5: #842f44;

TAILWIND

colors: {
  'brand-1': '#103c47',
  'brand-2': '#2d3946',
  'brand-3': '#4a3646',
  'brand-4': '#673245',
  'brand-5': '#842f44',
}

RGB Array

[16, 60, 71], [45, 57, 70], [74, 54, 70], [103, 50, 69], [132, 47, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #103C47, #2D3946, #4A3646, #673245, #842F44 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: #103c47; --color-2: #2d3946; --color-3: #4a3646; --color-4: #673245; --color-5: #842f44. 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