Twilight Sky Gradient & Golden Hour Warmth Category: Mood 18,100/mo searches

Sunset Color Palette — HEX Codes, Swatches & UI Palette

The dramatic transition of twilight as daylight softens into purple dusk. Seamlessly blending rich violet, fiery coral, golden honey, and rosy apricot to create emotive, romantic visual storytelling.

Deep Sky Indigo

Twilight Violet

#3A1C71

Rich Dusk Tone

Crimson Magenta

#8E2856

Warm Sunset Accent

Fiery Coral

#D76D77

Warm Glow

Golden Honey

#FFAF7B

Soft Horizon Tint

Apricot Sky

#FFD3B6

Open in Web Studio Color Wheel Tint & Shade Scale

Color Swatches & Technical Specifications

Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Sunset Color Palette.

Twilight Violet

Deep Sky Indigo

HEX #3A1C71

RGB rgb(58, 28, 113)

HSL hsl(261deg, 60%, 28%)

vs White: 13.26:1 (AAA) vs Black: 1.58:1 (Fail)

Crimson Magenta

Rich Dusk Tone

HEX #8E2856

RGB rgb(142, 40, 86)

HSL hsl(333deg, 56%, 36%)

vs White: 8.11:1 (AAA) vs Black: 2.59:1 (Fail)

Fiery Coral

Warm Sunset Accent

HEX #D76D77

RGB rgb(215, 109, 119)

HSL hsl(354deg, 57%, 64%)

vs White: 3.31:1 (AA Large) vs Black: 6.34:1 (AA)

Golden Honey

Warm Glow

HEX #FFAF7B

RGB rgb(255, 175, 123)

HSL hsl(24deg, 100%, 74%)

vs White: 1.8:1 (Fail) vs Black: 11.67:1 (AAA)

Apricot Sky

Soft Horizon Tint

HEX #FFD3B6

RGB rgb(255, 211, 182)

HSL hsl(24deg, 100%, 86%)

vs White: 1.38:1 (Fail) vs Black: 15.25:1 (AAA)

UI Design & Color Hierarchy Guide

Spectacular for modern CSS linear-gradients (`linear-gradient(135deg, #3A1C71, #D76D77, #FFAF7B)`). Perfect for hero section backdrops, album art, and lifestyle brand photography overlays.

60% Dominant Base

Use the primary neutral/light swatch (Apricot Sky) for canvas backgrounds and card surfaces.

30% Structural Secondary

Apply midtones for navigation bars, card headers, borders, and secondary buttons.

10% Accent Callout

Reserve high-saturation focal colors for CTAs, conversion badges, and active state highlights.

WCAG 2.1 Accessibility & Contrast Matrix

Legibility ratings between palette elements and key backgrounds (Lightest: Apricot Sky | Darkest: Twilight Violet):

Swatch	Contrast vs Light Canvas	Contrast vs Dark Canvas
Twilight Violet (#3A1C71)	9.62:1 AAA	1.0:1 Fail
Crimson Magenta (#8E2856)	5.89:1 AA	1.63:1 Fail
Fiery Coral (#D76D77)	2.4:1 Fail	4.01:1 AA Large
Golden Honey (#FFAF7B)	1.31:1 Fail	7.37:1 AAA
Apricot Sky (#FFD3B6)	1.0:1 Fail	9.62:1 AAA

CSS Custom Properties & Design Tokens

Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:

CSS Variables

:root {
  --color-1: #3A1C71; /* Twilight Violet - Deep Sky Indigo */
  --color-2: #8E2856; /* Crimson Magenta - Rich Dusk Tone */
  --color-3: #D76D77; /* Fiery Coral - Warm Sunset Accent */
  --color-4: #FFAF7B; /* Golden Honey - Warm Glow */
  --color-5: #FFD3B6; /* Apricot Sky - Soft Horizon Tint */
}

Tailwind CSS Config

{
  colors: {
    'palette-1': '#3A1C71',
    'palette-2': '#8E2856',
    'palette-3': '#D76D77',
    'palette-4': '#FFAF7B',
    'palette-5': '#FFD3B6'
  }
}

Explore More Curated Color Palettes

Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.

All Color Palettes Named Color Dictionary Interactive Color Wheel