#296885 + #3F5C5E + #515736 + #400B13 + #344F70 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#296885

Lake Blue · Teal · Mint Ice

HEX

#296885

RGB

rgb(41, 104, 133)

HSL

hsl(199, 53%, 34%)

HSB

hsb(199, 69%, 52%)

CMYK

cmyk(69%, 22%, 0%, 48%)

Oklch

oklch(49.0% 0.079 231.5)

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

#3F5C5E

Slate Blue · DarkSlateGray · Mint Ice

HEX

#3F5C5E

RGB

rgb(63, 92, 94)

HSL

hsl(184, 20%, 31%)

HSB

hsb(184, 33%, 37%)

CMYK

cmyk(33%, 2%, 0%, 63%)

Oklch

oklch(45.3% 0.034 201.4)

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

#515736

Grass Green · DarkOliveGreen · Forest Green

HEX

#515736

RGB

rgb(81, 87, 54)

HSL

hsl(71, 23%, 28%)

HSB

hsb(71, 38%, 34%)

CMYK

cmyk(7%, 0%, 38%, 66%)

Oklch

oklch(44.2% 0.051 116.9)

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

#400B13

Vermilion · Black · Deep Berry

HEX

#400B13

RGB

rgb(64, 11, 19)

HSL

hsl(351, 71%, 15%)

HSB

hsb(351, 83%, 25%)

CMYK

cmyk(0%, 83%, 70%, 75%)

Oklch

oklch(25.0% 0.081 17.0)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#344F70

Indigo · DarkSlateGray · Prussian Blue

HEX

#344F70

RGB

rgb(52, 79, 112)

HSL

hsl(213, 37%, 32%)

HSB

hsb(213, 54%, 44%)

CMYK

cmyk(54%, 29%, 0%, 56%)

Oklch

oklch(42.1% 0.064 254.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

296885

854629

Analogous

298574

296885

293A85

Triadic

296885

852968

688529

Split-Comp.

296885

85293A

857429

Tetradic

296885

742985

854629

3A8529

Contrast Matrix WCAG 2.1 Contrast

296885	3F5C5E	515736	400B13	344F70
—	1.2 Fail	1.2 Fail	2.7 Fail	1.4 Fail
1.2 Fail	—	1.0 Fail	2.3 Fail	1.2 Fail
1.2 Fail	1.0 Fail	—	2.2 Fail	1.1 Fail
2.7 Fail	2.3 Fail	2.2 Fail	—	2.0 Fail
1.4 Fail	1.2 Fail	1.1 Fail	2.0 Fail	—

White BG

6.2AA

7.2AAA

7.6AAA

16.5AAA

8.4AAA

Black BG

3.4AA Large

2.9Fail

2.8Fail

1.3Fail

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

44457E

4C4C5E

54543E

292911

404068

Deuteranopia

413C7C

4A485D

535340

2C3011

3E3C66

Tritanopia

2C7877

405D5D

514446

3D100F

356260

Achromatopsia

585858

545454

515151

1C1C1C

4B4B4B

Shades & Tints Shades & Tints

#296885

Dark

Light

#3F5C5E

Dark

Light

#515736

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #296885;
  --color-2: #3f5c5e;
  --color-3: #515736;
  --color-4: #400b13;
  --color-5: #344f70;
}

SCSS

$color-1: #296885;
$color-2: #3f5c5e;
$color-3: #515736;
$color-4: #400b13;
$color-5: #344f70;

TAILWIND

colors: {
  'brand-1': '#296885',
  'brand-2': '#3f5c5e',
  'brand-3': '#515736',
  'brand-4': '#400b13',
  'brand-5': '#344f70',
}

RGB Array

[41, 104, 133], [63, 92, 94], [81, 87, 54], [64, 11, 19], [52, 79, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #296885, #3F5C5E, #515736, #400B13, #344F70 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: #296885; --color-2: #3f5c5e; --color-3: #515736; --color-4: #400b13; --color-5: #344f70. 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