← Back to Editor

#2E3640 · #B0A037 · #D4AF42 · #C43153 · #C47487

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

#2E3640

Indigo · DarkSlateGray · Prussian Blue

HEX
#2E3640
RGB
rgb(46, 54, 64)
HSL
hsl(213, 16%, 22%)
HSB
hsb(213, 28%, 25%)
CMYK
cmyk(28%, 16%, 0%, 75%)
Oklch
oklch(33.0% 0.021 254.1)

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

#B0A037

Autumn Sage · GoldenRod · Honey Gold

HEX
#B0A037
RGB
rgb(176, 160, 55)
HSL
hsl(52, 52%, 45%)
HSB
hsb(52, 69%, 69%)
CMYK
cmyk(0%, 9%, 69%, 31%)
Oklch
oklch(70.0% 0.124 100.5)

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

#D4AF42

Ginger · GoldenRod · Sunflower

HEX
#D4AF42
RGB
rgb(212, 175, 66)
HSL
hsl(45, 63%, 55%)
HSB
hsb(45, 69%, 83%)
CMYK
cmyk(0%, 17%, 69%, 17%)
Oklch
oklch(76.7% 0.132 89.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C43153

Crimson · Crimson · Passion Red

HEX
#C43153
RGB
rgb(196, 49, 83)
HSL
hsl(346, 60%, 48%)
HSB
hsb(346, 75%, 77%)
CMYK
cmyk(0%, 75%, 58%, 23%)
Oklch
oklch(54.9% 0.183 12.6)

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

#C47487

Peach Pink · LightCoral · Coral Red

HEX
#C47487
RGB
rgb(196, 116, 135)
HSL
hsl(346, 40%, 61%)
HSB
hsb(346, 41%, 77%)
CMYK
cmyk(0%, 41%, 31%, 23%)
Oklch
oklch(65.1% 0.103 5.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E3640
41392F

Analogous

2F4041
2E3640
302F41

Triadic

2E3640
412F37
37412F

Split-Comp.

2E3640
41302F
40412F

Tetradic

2E3640
412F40
41392F
2F4130

Contrast Matrix WCAG 2.1 Contrast

2E3640
B0A037
D4AF42
C43153
C47487
—
4.6
AA
5.8
AA
2.3
Fail
3.6
AA Large
4.6
AA
—
1.3
Fail
2.0
Fail
1.3
Fail
5.8
AA
1.3
Fail
—
2.6
Fail
1.6
Fail
2.3
Fail
2.0
Fail
2.6
Fail
—
1.6
Fail
3.6
AA Large
1.3
Fail
1.6
Fail
1.6
Fail
—
White BG
12.2AAA
2.6Fail
2.1Fail
5.4AA
3.4AA Large
Black BG
1.7Fail
7.9AAA
10.0AAA
3.9AA Large
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

31323E
A9A950
C4C45C
84834B
A1A182

Deuteranopia

31303D
AAAB57
C6C963
8D9849
A6AC81

Tritanopia

2E3C3B
AF6469
D27176
BD4443
C07F7E

Achromatopsia

353535
999999
AEAEAE
616161
8E8E8E

Shades & Tints Shades & Tints

#2E3640

Dark
Light

#B0A037

Dark
Light

#D4AF42

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e3640;
  --color-2: #b0a037;
  --color-3: #d4af42;
  --color-4: #c43153;
  --color-5: #c47487;
}

SCSS

$color-1: #2e3640;
$color-2: #b0a037;
$color-3: #d4af42;
$color-4: #c43153;
$color-5: #c47487;

TAILWIND

colors: {
  'brand-1': '#2e3640',
  'brand-2': '#b0a037',
  'brand-3': '#d4af42',
  'brand-4': '#c43153',
  'brand-5': '#c47487',
}

RGB Array

[46, 54, 64], [176, 160, 55], [212, 175, 66], [196, 49, 83], [196, 116, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #2E3640, #B0A037, #D4AF42, #C43153, #C47487 is ideal for: corporate websites, product showcases, portfolios. 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: #2e3640; --color-2: #b0a037; --color-3: #d4af42; --color-4: #c43153; --color-5: #c47487. 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. 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