← Back to Editor

#36374F · #3F435E · #6B6B6B · #9E8A6F · #CFA872

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 Library

Color Details Color Details

#36374F

Indigo · DarkSlateGray · Prussian Blue

HEX
#36374F
RGB
rgb(54, 55, 79)
HSL
hsl(238, 19%, 26%)
HSB
hsb(238, 32%, 31%)
CMYK
cmyk(32%, 30%, 0%, 69%)
Oklch
oklch(34.7% 0.042 282.1)

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

#3F435E

Indigo · DarkSlateGray · Prussian Blue

HEX
#3F435E
RGB
rgb(63, 67, 94)
HSL
hsl(232, 20%, 31%)
HSB
hsb(232, 33%, 37%)
CMYK
cmyk(33%, 29%, 0%, 63%)
Oklch
oklch(39.1% 0.046 277.5)

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

#6B6B6B

Ink Gray · DimGray · Warm Gray

HEX
#6B6B6B
RGB
rgb(107, 107, 107)
HSL
hsl(0, 0%, 42%)
HSB
hsb(0, 0%, 42%)
CMYK
cmyk(0%, 0%, 0%, 58%)
Oklch
oklch(52.8% 0.000 89.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#9E8A6F

Ginger · Gray · Warm Sun

HEX
#9E8A6F
RGB
rgb(158, 138, 111)
HSL
hsl(34, 20%, 53%)
HSB
hsb(34, 30%, 62%)
CMYK
cmyk(0%, 13%, 30%, 38%)
Oklch
oklch(64.4% 0.045 75.1)

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

#CFA872

Ginger · Tan · Warm Sun

HEX
#CFA872
RGB
rgb(207, 168, 114)
HSL
hsl(35, 49%, 63%)
HSB
hsb(35, 45%, 81%)
CMYK
cmyk(0%, 19%, 45%, 19%)
Oklch
oklch(75.5% 0.084 75.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

36374F
4F4E36

Analogous

36434F
36374F
41364F

Triadic

36374F
4F3637
374F36

Split-Comp.

36374F
4F4136
434F36

Tetradic

36374F
4F3643
4F4E36
364F41

Contrast Matrix WCAG 2.1 Contrast

36374F
3F435E
6B6B6B
9E8A6F
CFA872
—
1.2
Fail
2.2
Fail
3.5
AA Large
5.2
AA
1.2
Fail
—
1.8
Fail
2.9
Fail
4.4
AA Large
2.2
Fail
1.8
Fail
—
1.6
Fail
2.4
Fail
3.5
AA Large
2.9
Fail
1.6
Fail
—
1.5
Fail
5.2
AA
4.4
AA Large
2.4
Fail
1.5
Fail
—
White BG
11.6AAA
9.7AAA
5.3AA
3.3AA Large
2.2Fail
Black BG
1.8Fail
2.2Fail
3.9AA Large
6.3AA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

363649
414157
6B6B6B
959576
BEBE7F

Deuteranopia

363648
414056
6B6B6B
979877
C0C382

Tritanopia

364544
3F5251
6B6B6B
9D7B7C
CD898C

Achromatopsia

393939
454545
6B6B6B
8D8D8D
AEAEAE

Shades & Tints Shades & Tints

#36374F

Dark
Light

#3F435E

Dark
Light

#6B6B6B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #36374f;
  --color-2: #3f435e;
  --color-3: #6b6b6b;
  --color-4: #9e8a6f;
  --color-5: #cfa872;
}

SCSS

$color-1: #36374f;
$color-2: #3f435e;
$color-3: #6b6b6b;
$color-4: #9e8a6f;
$color-5: #cfa872;

TAILWIND

colors: {
  'brand-1': '#36374f',
  'brand-2': '#3f435e',
  'brand-3': '#6b6b6b',
  'brand-4': '#9e8a6f',
  'brand-5': '#cfa872',
}

RGB Array

[54, 55, 79], [63, 67, 94], [107, 107, 107], [158, 138, 111], [207, 168, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #36374F, #3F435E, #6B6B6B, #9E8A6F, #CFA872 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #36374f; --color-2: #3f435e; --color-3: #6b6b6b; --color-4: #9e8a6f; --color-5: #cfa872. 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. 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