← Back to Editor

#4B4F5A · #D5B2AE · #856266 · #A8977B · #877A67

sunset

A 5-color sunset palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#4B4F5A

Indigo · DarkSlateGray · Charcoal

HEX
#4B4F5A
RGB
rgb(75, 79, 90)
HSL
hsl(224, 9%, 32%)
HSB
hsb(224, 17%, 35%)
CMYK
cmyk(17%, 12%, 0%, 65%)
Oklch
oklch(42.8% 0.019 269.7)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#D5B2AE

Peach Pink · Silver · Coral Red

HEX
#D5B2AE
RGB
rgb(213, 178, 174)
HSL
hsl(6, 32%, 76%)
HSB
hsb(6, 18%, 84%)
CMYK
cmyk(0%, 16%, 18%, 16%)
Oklch
oklch(79.3% 0.041 25.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#856266

Crimson · DimGray · Passion Red

HEX
#856266
RGB
rgb(133, 98, 102)
HSL
hsl(353, 15%, 45%)
HSB
hsb(353, 26%, 52%)
CMYK
cmyk(0%, 26%, 23%, 48%)
Oklch
oklch(53.3% 0.046 11.1)

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

#A8977B

Ginger · Gray · Warm Sun

HEX
#A8977B
RGB
rgb(168, 151, 123)
HSL
hsl(37, 21%, 57%)
HSB
hsb(37, 27%, 66%)
CMYK
cmyk(0%, 10%, 27%, 34%)
Oklch
oklch(68.4% 0.044 80.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#877A67

Ochre · Gray · Amber Brown

HEX
#877A67
RGB
rgb(135, 122, 103)
HSL
hsl(36, 13%, 47%)
HSB
hsb(36, 24%, 53%)
CMYK
cmyk(0%, 10%, 24%, 47%)
Oklch
oklch(58.6% 0.032 77.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B4F5A
59554A

Analogous

4A5659
4B4F5A
4E4A59

Triadic

4B4F5A
594A4E
4E594A

Split-Comp.

4B4F5A
594E4A
56594A

Tetradic

4B4F5A
594A56
59554A
4A594E

Contrast Matrix WCAG 2.1 Contrast

4B4F5A
D5B2AE
856266
A8977B
877A67
—
4.2
AA Large
1.5
Fail
2.9
Fail
2.0
Fail
4.2
AA Large
—
2.7
Fail
1.5
Fail
2.2
Fail
1.5
Fail
2.7
Fail
—
1.9
Fail
1.3
Fail
2.9
Fail
1.5
Fail
1.9
Fail
—
1.5
Fail
2.0
Fail
2.2
Fail
1.3
Fail
1.5
Fail
—
White BG
8.2AAA
1.9Fail
5.3AA
2.8Fail
4.2AA Large
Black BG
2.6Fail
10.8AAA
3.9AA Large
7.4AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4D57
C6C6AF
767665
A1A082
81816C

Deuteranopia

4D4C57
C8CBAF
787B65
A2A383
82836D

Tritanopia

4B5555
D3B0B0
836464
A78788
866F70

Achromatopsia

4F4F4F
BCBCBC
6D6D6D
999999
7C7C7C

Shades & Tints Shades & Tints

#4B4F5A

Dark
Light

#D5B2AE

Dark
Light

#856266

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b4f5a;
  --color-2: #d5b2ae;
  --color-3: #856266;
  --color-4: #a8977b;
  --color-5: #877a67;
}

SCSS

$color-1: #4b4f5a;
$color-2: #d5b2ae;
$color-3: #856266;
$color-4: #a8977b;
$color-5: #877a67;

TAILWIND

colors: {
  'brand-1': '#4b4f5a',
  'brand-2': '#d5b2ae',
  'brand-3': '#856266',
  'brand-4': '#a8977b',
  'brand-5': '#877a67',
}

RGB Array

[75, 79, 90], [213, 178, 174], [133, 98, 102], [168, 151, 123], [135, 122, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #4B4F5A, #D5B2AE, #856266, #A8977B, #877A67 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4b4f5a; --color-2: #d5b2ae; --color-3: #856266; --color-4: #a8977b; --color-5: #877a67. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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