← Back to Editor

#789078 · #481630 · #783048 · #C04830 · #EB6933

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#789078

Celadon · Gray · Olive Green

HEX
#789078
RGB
rgb(120, 144, 120)
HSL
hsl(120, 10%, 52%)
HSB
hsb(120, 17%, 56%)
CMYK
cmyk(17%, 0%, 17%, 44%)
Oklch
oklch(62.8% 0.045 145.0)

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

#481630

Rose Purple · DarkSlateGray · Raspberry

HEX
#481630
RGB
rgb(72, 22, 48)
HSL
hsl(329, 53%, 18%)
HSB
hsb(329, 69%, 28%)
CMYK
cmyk(0%, 69%, 33%, 72%)
Oklch
oklch(29.0% 0.083 351.2)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#783048

Dark Violet · Brown · Camellia

HEX
#783048
RGB
rgb(120, 48, 72)
HSL
hsl(340, 43%, 33%)
HSB
hsb(340, 60%, 47%)
CMYK
cmyk(0%, 60%, 40%, 53%)
Oklch
oklch(41.7% 0.104 1.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#C04830

Crimson · Sienna · Passion Red

HEX
#C04830
RGB
rgb(192, 72, 48)
HSL
hsl(10, 60%, 47%)
HSB
hsb(10, 75%, 75%)
CMYK
cmyk(0%, 63%, 75%, 25%)
Oklch
oklch(56.1% 0.159 33.2)

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

#EB6933

Tangerine · Tomato · Warm Sun

HEX
#EB6933
RGB
rgb(235, 105, 51)
HSL
hsl(18, 82%, 56%)
HSB
hsb(18, 78%, 92%)
CMYK
cmyk(0%, 55%, 78%, 8%)
Oklch
oklch(67.2% 0.174 41.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

789078
917891

Analogous

859178
789078
789185

Triadic

789078
787891
917878

Split-Comp.

789078
857891
917885

Tetradic

789078
788591
917891
918578

Contrast Matrix WCAG 2.1 Contrast

789078
481630
783048
C04830
EB6933
—
4.2
AA Large
2.6
Fail
1.4
Fail
1.1
Fail
4.2
AA Large
—
1.6
Fail
2.9
Fail
4.6
AA
2.6
Fail
1.6
Fail
—
1.8
Fail
2.9
Fail
1.4
Fail
2.9
Fail
1.8
Fail
—
1.6
Fail
1.1
Fail
4.6
AA
2.9
Fail
1.6
Fail
—
White BG
3.5AA Large
14.7AAA
9.1AAA
5.0AA
3.2AA Large
Black BG
6.1AA
1.4Fail
2.3Fail
4.2AA Large
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

82837E
32322A
595842
8C8B36
B3B240

Deuteranopia

817F7F
353928
5D6241
939C37
BAC443

Tritanopia

798283
452524
743E3D
BA3A3B
E54A4D

Achromatopsia

868686
282828
484848
696969
8A8A8A

Shades & Tints Shades & Tints

#789078

Dark
Light

#481630

Dark
Light

#783048

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #789078;
  --color-2: #481630;
  --color-3: #783048;
  --color-4: #c04830;
  --color-5: #eb6933;
}

SCSS

$color-1: #789078;
$color-2: #481630;
$color-3: #783048;
$color-4: #c04830;
$color-5: #eb6933;

TAILWIND

colors: {
  'brand-1': '#789078',
  'brand-2': '#481630',
  'brand-3': '#783048',
  'brand-4': '#c04830',
  'brand-5': '#eb6933',
}

RGB Array

[120, 144, 120], [72, 22, 48], [120, 48, 72], [192, 72, 48], [235, 105, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #789078, #481630, #783048, #C04830, #EB6933 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: #789078; --color-2: #481630; --color-3: #783048; --color-4: #c04830; --color-5: #eb6933. 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