← Back to Editor

#F78146 · #B87C3F · #498058 · #236B51 · #0F201C

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

#F78146

Apricot · Coral · Warm Sun

HEX
#F78146
RGB
rgb(247, 129, 70)
HSL
hsl(20, 92%, 62%)
HSB
hsb(20, 72%, 97%)
CMYK
cmyk(0%, 48%, 72%, 3%)
Oklch
oklch(72.6% 0.162 45.4)

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

#B87C3F

Ochre · Chocolate · Amber Brown

HEX
#B87C3F
RGB
rgb(184, 124, 63)
HSL
hsl(30, 49%, 48%)
HSB
hsb(30, 66%, 72%)
CMYK
cmyk(0%, 33%, 66%, 28%)
Oklch
oklch(63.6% 0.107 64.1)

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

#498058

Celadon · SeaGreen · Forest Green

HEX
#498058
RGB
rgb(73, 128, 88)
HSL
hsl(136, 27%, 39%)
HSB
hsb(136, 43%, 50%)
CMYK
cmyk(43%, 0%, 31%, 50%)
Oklch
oklch(55.0% 0.086 151.5)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#236B51

Mineral Blue · DarkSlateGray · Forest Green

HEX
#236B51
RGB
rgb(35, 107, 81)
HSL
hsl(158, 51%, 28%)
HSB
hsb(158, 67%, 42%)
CMYK
cmyk(67%, 0%, 24%, 58%)
Oklch
oklch(47.6% 0.083 165.5)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#0F201C

Mineral Blue · Black · Peacock Green

HEX
#0F201C
RGB
rgb(15, 32, 28)
HSL
hsl(166, 36%, 9%)
HSB
hsb(166, 53%, 13%)
CMYK
cmyk(53%, 0%, 12%, 87%)
Oklch
oklch(22.7% 0.024 177.3)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F78146
45BCF7

Analogous

F74563
F78146
F7DA45

Triadic

F78146
45F780
8045F7

Split-Comp.

F78146
45F7DA
4563F7

Tetradic

F78146
63F745
45BCF7
DA45F7

Contrast Matrix WCAG 2.1 Contrast

F78146
B87C3F
498058
236B51
0F201C
—
1.4
Fail
1.8
Fail
2.5
Fail
6.6
AA
1.4
Fail
—
1.3
Fail
1.8
Fail
4.8
AA
1.8
Fail
1.3
Fail
—
1.4
Fail
3.6
AA Large
2.5
Fail
1.8
Fail
1.4
Fail
—
2.6
Fail
6.6
AA
4.8
AA
3.6
AA Large
2.6
Fail
—
White BG
2.6Fail
3.5AA Large
4.7AA
6.4AA
16.9AAA
Black BG
8.2AAA
6.0AA
4.5AA
3.3AA Large
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C354
9E9D4E
616162
424357
16171D

Deuteranopia

CBD458
A2A651
5E5A64
3E3959
15141D

Tritanopia

F16062
B5595C
4C696B
275C5D
101E1E

Achromatopsia

9E9E9E
878787
6B6B6B
535353
1A1A1A

Shades & Tints Shades & Tints

#F78146

Dark
Light

#B87C3F

Dark
Light

#498058

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f78146;
  --color-2: #b87c3f;
  --color-3: #498058;
  --color-4: #236b51;
  --color-5: #0f201c;
}

SCSS

$color-1: #f78146;
$color-2: #b87c3f;
$color-3: #498058;
$color-4: #236b51;
$color-5: #0f201c;

TAILWIND

colors: {
  'brand-1': '#f78146',
  'brand-2': '#b87c3f',
  'brand-3': '#498058',
  'brand-4': '#236b51',
  'brand-5': '#0f201c',
}

RGB Array

[247, 129, 70], [184, 124, 63], [73, 128, 88], [35, 107, 81], [15, 32, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F78146, #B87C3F, #498058, #236B51, #0F201C is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f78146; --color-2: #b87c3f; --color-3: #498058; --color-4: #236b51; --color-5: #0f201c. 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 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