← Back to Editor

#F39B2D · #F8695A · #D45552 · #98505B · #373E5F

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

#F39B2D

Ginger · GoldenRod · Warm Sun

HEX
#F39B2D
RGB
rgb(243, 155, 45)
HSL
hsl(33, 89%, 56%)
HSB
hsb(33, 81%, 95%)
CMYK
cmyk(0%, 36%, 81%, 5%)
Oklch
oklch(76.2% 0.155 66.2)

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

#F8695A

Peach Pink · Tomato · Coral Red

HEX
#F8695A
RGB
rgb(248, 105, 90)
HSL
hsl(6, 92%, 66%)
HSB
hsb(6, 64%, 97%)
CMYK
cmyk(0%, 58%, 64%, 3%)
Oklch
oklch(69.6% 0.178 28.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D45552

Crimson · Tomato · Passion Red

HEX
#D45552
RGB
rgb(212, 85, 82)
HSL
hsl(1, 60%, 58%)
HSB
hsb(1, 61%, 83%)
CMYK
cmyk(0%, 60%, 61%, 17%)
Oklch
oklch(61.5% 0.161 24.4)

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

#98505B

Crimson · Sienna · Passion Red

HEX
#98505B
RGB
rgb(152, 80, 91)
HSL
hsl(351, 31%, 45%)
HSB
hsb(351, 47%, 60%)
CMYK
cmyk(0%, 47%, 40%, 40%)
Oklch
oklch(52.1% 0.096 11.3)

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

#373E5F

Indigo · DarkSlateGray · Prussian Blue

HEX
#373E5F
RGB
rgb(55, 62, 95)
HSL
hsl(230, 27%, 29%)
HSB
hsb(230, 42%, 37%)
CMYK
cmyk(42%, 35%, 0%, 63%)
Oklch
oklch(37.3% 0.058 274.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F39B2D
2B85F3

Analogous

F3352B
F39B2D
E9F32B

Triadic

F39B2D
2BF399
992BF3

Split-Comp.

F39B2D
2BE9F3
352BF3

Tetradic

F39B2D
2BF335
2B85F3
F32BE9

Contrast Matrix WCAG 2.1 Contrast

F39B2D
F8695A
D45552
98505B
373E5F
—
1.3
Fail
1.8
Fail
2.6
Fail
4.7
AA
1.3
Fail
—
1.4
Fail
2.0
Fail
3.6
AA Large
1.8
Fail
1.4
Fail
—
1.4
Fail
2.6
Fail
2.6
Fail
2.0
Fail
1.4
Fail
—
1.8
Fail
4.7
AA
3.6
AA Large
2.6
Fail
1.8
Fail
—
White BG
2.2Fail
2.9Fail
4.0AA Large
5.8AA
10.4AAA
Black BG
9.5AAA
7.2AAA
5.2AA
3.6AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCC48
BAB95E
9D9C53
797858
3A3A57

Deuteranopia

D2D94E
C2CD5F
A4AE53
7D8258
3A3955

Tritanopia

EF5D61
F16061
CE5353
945656
37514F

Achromatopsia

A9A9A9
929292
7B7B7B
676767
404040

Shades & Tints Shades & Tints

#F39B2D

Dark
Light

#F8695A

Dark
Light

#D45552

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f39b2d;
  --color-2: #f8695a;
  --color-3: #d45552;
  --color-4: #98505b;
  --color-5: #373e5f;
}

SCSS

$color-1: #f39b2d;
$color-2: #f8695a;
$color-3: #d45552;
$color-4: #98505b;
$color-5: #373e5f;

TAILWIND

colors: {
  'brand-1': '#f39b2d',
  'brand-2': '#f8695a',
  'brand-3': '#d45552',
  'brand-4': '#98505b',
  'brand-5': '#373e5f',
}

RGB Array

[243, 155, 45], [248, 105, 90], [212, 85, 82], [152, 80, 91], [55, 62, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F39B2D, #F8695A, #D45552, #98505B, #373E5F 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: #f39b2d; --color-2: #f8695a; --color-3: #d45552; --color-4: #98505b; --color-5: #373e5f. 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