← Back to Editor

#473B2B · #9C7D51 · #020703 · #FFB902 · #D88207

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#473B2B

Ochre · DarkSlateGray · Cinnamon

HEX
#473B2B
RGB
rgb(71, 59, 43)
HSL
hsl(34, 25%, 22%)
HSB
hsb(34, 39%, 28%)
CMYK
cmyk(0%, 17%, 39%, 72%)
Oklch
oklch(36.0% 0.031 74.5)

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

#9C7D51

Ochre · Gray · Amber Brown

HEX
#9C7D51
RGB
rgb(156, 125, 81)
HSL
hsl(35, 32%, 46%)
HSB
hsb(35, 48%, 61%)
CMYK
cmyk(0%, 20%, 48%, 39%)
Oklch
oklch(60.9% 0.072 75.5)

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

#020703

Pine Green · Black · Dark Green

HEX
#020703
RGB
rgb(2, 7, 3)
HSL
hsl(132, 56%, 2%)
HSB
hsb(132, 71%, 3%)
CMYK
cmyk(71%, 0%, 57%, 97%)
Oklch
oklch(11.8% 0.019 151.2)

Traditional「Pine Green」· Paint「Dark Green」· Creative Blush Sunrise

#FFB902

Ochre · Orange · Honey Gold

HEX
#FFB902
RGB
rgb(255, 185, 2)
HSL
hsl(43, 100%, 50%)
HSB
hsb(43, 99%, 100%)
CMYK
cmyk(0%, 27%, 99%, 0%)
Oklch
oklch(82.9% 0.171 81.0)

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

#D88207

Ochre · DarkGoldenRod · Amber Brown

HEX
#D88207
RGB
rgb(216, 130, 7)
HSL
hsl(35, 94%, 44%)
HSB
hsb(35, 97%, 85%)
CMYK
cmyk(0%, 40%, 97%, 15%)
Oklch
oklch(68.3% 0.152 64.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

473B2B
2A3646

Analogous

462C2A
473B2B
44462A

Triadic

473B2B
2A463A
3A2A46

Split-Comp.

473B2B
2A4446
2C2A46

Tetradic

473B2B
2A462C
2A3646
462A44

Contrast Matrix WCAG 2.1 Contrast

473B2B
9C7D51
020703
FFB902
D88207
—
2.8
Fail
1.9
Fail
6.3
AA
3.7
AA Large
2.8
Fail
—
5.3
AA
2.2
Fail
1.3
Fail
1.9
Fail
5.3
AA
—
11.8
AAA
6.9
AA
6.3
AA
2.2
Fail
11.8
AAA
—
1.7
Fail
3.7
AA Large
1.3
Fail
6.9
AA
1.7
Fail
—
White BG
10.9AAA
3.8AA Large
20.3AAA
1.7Fail
3.0Fail
Black BG
1.9Fail
5.5AA
1.0Fail
12.2AAA
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

42422F
8F8E5C
040404
E1E02E
B3B225

Deuteranopia

434330
90935E
040404
E5EA39
B8BE2C

Tritanopia

463233
9A6466
020505
FC5159
D43C41

Achromatopsia

3D3D3D
818181
050505
B9B9B9
8E8E8E

Shades & Tints Shades & Tints

#473B2B

Dark
Light

#9C7D51

Dark
Light

#020703

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #473b2b;
  --color-2: #9c7d51;
  --color-3: #020703;
  --color-4: #ffb902;
  --color-5: #d88207;
}

SCSS

$color-1: #473b2b;
$color-2: #9c7d51;
$color-3: #020703;
$color-4: #ffb902;
$color-5: #d88207;

TAILWIND

colors: {
  'brand-1': '#473b2b',
  'brand-2': '#9c7d51',
  'brand-3': '#020703',
  'brand-4': '#ffb902',
  'brand-5': '#d88207',
}

RGB Array

[71, 59, 43], [156, 125, 81], [2, 7, 3], [255, 185, 2], [216, 130, 7]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #473B2B, #9C7D51, #020703, #FFB902, #D88207 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #473b2b; --color-2: #9c7d51; --color-3: #020703; --color-4: #ffb902; --color-5: #d88207. 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. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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