#3B605E + #716E4B + #927A42 + #8F5635 + #8E3A35 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B605E

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#3B605E

RGB

rgb(59, 96, 94)

HSL

hsl(177, 24%, 30%)

HSB

hsb(177, 39%, 38%)

CMYK

cmyk(39%, 0%, 2%, 62%)

Oklch

oklch(46.1% 0.043 191.4)

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

#716E4B

Autumn Sage · DimGray · Honey Gold

HEX

#716E4B

RGB

rgb(113, 110, 75)

HSL

hsl(55, 20%, 37%)

HSB

hsb(55, 34%, 44%)

CMYK

cmyk(0%, 3%, 34%, 56%)

Oklch

oklch(53.2% 0.051 103.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#927A42

Ochre · Sienna · Honey Gold

HEX

#927A42

RGB

rgb(146, 122, 66)

HSL

hsl(42, 38%, 42%)

HSB

hsb(42, 55%, 57%)

CMYK

cmyk(0%, 16%, 55%, 43%)

Oklch

oklch(59.0% 0.080 86.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#8F5635

Tangerine · Sienna · Amber Brown

HEX

#8F5635

RGB

rgb(143, 86, 53)

HSL

hsl(22, 46%, 38%)

HSB

hsb(22, 63%, 56%)

CMYK

cmyk(0%, 40%, 63%, 44%)

Oklch

oklch(51.1% 0.089 49.8)

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

#8E3A35

Crimson · Brown · Wine Red

HEX

#8E3A35

RGB

rgb(142, 58, 53)

HSL

hsl(3, 46%, 38%)

HSB

hsb(3, 63%, 56%)

CMYK

cmyk(0%, 59%, 63%, 44%)

Oklch

oklch(46.2% 0.115 26.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B605E

5F3A3C

Analogous

3A5F4B

3B605E

3A4E5F

Triadic

3B605E

5D3A5F

5F5D3A

Split-Comp.

3B605E

5F3A4E

5F4B3A

Tetradic

3B605E

4B3A5F

5F3A3C

4E5F3A

Contrast Matrix WCAG 2.1 Contrast

3B605E	716E4B	927A42	8F5635	8E3A35
—	1.3 Fail	1.7 Fail	1.2 Fail	1.1 Fail
1.3 Fail	—	1.3 Fail	1.1 Fail	1.4 Fail
1.7 Fail	1.3 Fail	—	1.4 Fail	1.8 Fail
1.2 Fail	1.1 Fail	1.4 Fail	—	1.3 Fail
1.1 Fail	1.4 Fail	1.8 Fail	1.3 Fail	—

White BG

7.0AA

5.2AA

4.1AA Large

5.9AA

7.5AAA

Black BG

3.0AA Large

4.0AA Large

5.1AA

3.6AA Large

2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B5E

707053

888750

76763D

6A6936

Deuteranopia

49465F

707056

898B53

7A7E3F

6F7536

Tritanopia

3D5F5F

715A5C

915A5D

8C4345

8A3737

Achromatopsia

555555

6B6B6B

7B7B7B

636363

535353

Shades & Tints Shades & Tints

#3B605E

Dark

Light

#716E4B

Dark

Light

#927A42

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b605e;
  --color-2: #716e4b;
  --color-3: #927a42;
  --color-4: #8f5635;
  --color-5: #8e3a35;
}

SCSS

$color-1: #3b605e;
$color-2: #716e4b;
$color-3: #927a42;
$color-4: #8f5635;
$color-5: #8e3a35;

TAILWIND

colors: {
  'brand-1': '#3b605e',
  'brand-2': '#716e4b',
  'brand-3': '#927a42',
  'brand-4': '#8f5635',
  'brand-5': '#8e3a35',
}

RGB Array

[59, 96, 94], [113, 110, 75], [146, 122, 66], [143, 86, 53], [142, 58, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #3B605E, #716E4B, #927A42, #8F5635, #8E3A35 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: #3b605e; --color-2: #716e4b; --color-3: #927a42; --color-4: #8f5635; --color-5: #8e3a35. 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 sunset-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