#416C57 + #36473D + #412C1F + #A16D3C + #885535 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#416C57

Mineral Blue · DarkSlateGray · Forest Green

HEX

#416C57

RGB

rgb(65, 108, 87)

HSL

hsl(151, 25%, 34%)

HSB

hsb(151, 40%, 42%)

CMYK

cmyk(40%, 0%, 19%, 58%)

Oklch

oklch(49.3% 0.059 162.0)

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

#36473D

Celadon · DarkSlateGray · Forest Green

HEX

#36473D

RGB

rgb(54, 71, 61)

HSL

hsl(145, 14%, 25%)

HSB

hsb(145, 24%, 28%)

CMYK

cmyk(24%, 0%, 14%, 72%)

Oklch

oklch(38.0% 0.028 159.0)

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

#412C1F

Tangerine · DarkSlateGray · Cinnamon

HEX

#412C1F

RGB

rgb(65, 44, 31)

HSL

hsl(23, 35%, 19%)

HSB

hsb(23, 52%, 25%)

CMYK

cmyk(0%, 32%, 52%, 75%)

Oklch

oklch(31.4% 0.038 52.6)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#A16D3C

Tangerine · Sienna · Amber Brown

HEX

#A16D3C

RGB

rgb(161, 109, 60)

HSL

hsl(29, 46%, 43%)

HSB

hsb(29, 63%, 63%)

CMYK

cmyk(0%, 32%, 63%, 37%)

Oklch

oklch(57.9% 0.093 62.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#885535

Tangerine · Sienna · Amber Brown

HEX

#885535

RGB

rgb(136, 85, 53)

HSL

hsl(23, 44%, 37%)

HSB

hsb(23, 61%, 53%)

CMYK

cmyk(0%, 38%, 61%, 47%)

Oklch

oklch(50.0% 0.082 52.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

416C57

6C4156

Analogous

416C42

416C57

416C6C

Triadic

416C57

57416C

6C5741

Split-Comp.

416C57

6C416C

6C4241

Tetradic

416C57

42416C

6C4156

6C6C41

Contrast Matrix WCAG 2.1 Contrast

416C57	36473D	412C1F	A16D3C	885535
—	1.7 Fail	2.2 Fail	1.4 Fail	1.0 Fail
1.7 Fail	—	1.3 Fail	2.2 Fail	1.6 Fail
2.2 Fail	1.3 Fail	—	3.0 Fail	2.1 Fail
1.4 Fail	2.2 Fail	3.0 Fail	—	1.4 Fail
1.0 Fail	1.6 Fail	2.1 Fail	1.4 Fail	—

White BG

6.0AA

9.9AAA

13.1AAA

4.4AA Large

6.2AA

Black BG

3.5AA Large

2.1Fail

1.6Fail

4.8AA

3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

54545C

3D3E3F

383822

8A8A48

72713D

Deuteranopia

514E5D

3C3B40

393B23

8E914B

75793F

Tritanopia

436061

374142

402525

9E5153

854344

Achromatopsia

5D5D5D

414141

313131

777777

616161

Shades & Tints Shades & Tints

#416C57

Dark

Light

#36473D

Dark

Light

#412C1F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #416c57;
  --color-2: #36473d;
  --color-3: #412c1f;
  --color-4: #a16d3c;
  --color-5: #885535;
}

SCSS

$color-1: #416c57;
$color-2: #36473d;
$color-3: #412c1f;
$color-4: #a16d3c;
$color-5: #885535;

TAILWIND

colors: {
  'brand-1': '#416c57',
  'brand-2': '#36473d',
  'brand-3': '#412c1f',
  'brand-4': '#a16d3c',
  'brand-5': '#885535',
}

RGB Array

[65, 108, 87], [54, 71, 61], [65, 44, 31], [161, 109, 60], [136, 85, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #416C57, #36473D, #412C1F, #A16D3C, #885535 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: #416c57; --color-2: #36473d; --color-3: #412c1f; --color-4: #a16d3c; --color-5: #885535. 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