Palette

Golden Hour Radiance

Captures the magical, warm glow of the sun just before it sets, painting the sky with soft hues.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Golden Hour Radiance reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Golden Hour Radiance.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#F9CC81#FFBE42#E67A26#C84B31#F4EDD6

Palette guide

How to use Golden Hour Radiance

Overview

The Golden Hour Radiance palette evokes the serene, magical glow of a sun just before it sets, offering a warm and inviting atmosphere. Featuring soft gold #F9CC81, vibrant orange #FFBE42, earthy burnt orange #E67A26, deep coral #C84B31, and a creamy off-white #F4EDD6, this palette provides designers with a versatile range for creating comforting and natural aesthetics. Its harmonious blend of warm tones and a subtle, calming background makes it ideal for projects seeking a touch of natural elegance and gentle vibrancy. This scheme is perfect for conveying warmth without being overtly bold.

Best used for

Brand identity for wellness or beauty products
Cozy blog or website design
Photography preset or filter inspiration
Event invitations and decor (e.g., autumn weddings)
Digital illustrations with a warm, natural light focus
Home decor inspiration and mood boards

Suggested color roles

primary

Use #FFBE42 as a primary action color or for prominent headings, offering a bright and inviting focal point.

secondary

Apply #E67A26 for secondary calls-to-action, subheadings, or as a rich accent to complement the primary orange.

accent

Reserve #C84B31 for striking accents, important notifications, or small, impactful graphical elements.

background

Utilize #F4EDD6 as a soft, neutral background, providing excellent readability and a gentle canvas.

text

For body text, consider a dark charcoal or black for optimal contrast on #F4EDD6. For headings on darker shades, use #F9CC81.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using lighter colors like #F9CC81 on #F4EDD6.
The deep #C84B31 offers good contrast for text when paired with #F4EDD6, meeting WCAG AA standards.
Avoid using #F9CC81 or #FFBE42 for small text against very light backgrounds due to potential readability issues.
Consider providing alternative text styles for users with color vision deficiencies, as some warm tones can be hard to differentiate.

Recommended combinations

Warm Glow

Ideal for hero sections or prominent elements to convey warmth and energy.

#FFBE42 · #E67A26 · #F9CC81

Sunset Depth

Creates a sophisticated, grounded feel; suitable for footers, sidebars, or call-out boxes.

#C84B31 · #E67A26 · #F4EDD6

Soft Radiance

Excellent for light, airy designs, backgrounds, or subtle branding elements that need to feel gentle.

#F4EDD6 · #F9CC81 · #FFBE42

CSS variables

:root {
  --golden-hour-radiance-1: #F9CC81;
  --golden-hour-radiance-2: #FFBE42;
  --golden-hour-radiance-3: #E67A26;
  --golden-hour-radiance-4: #C84B31;
  --golden-hour-radiance-5: #F4EDD6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-hour-radiance": {
        1: "#F9CC81",
        2: "#FFBE42",
        3: "#E67A26",
        4: "#C84B31",
        5: "#F4EDD6",
      }
    }
  }
}

Hex values

Color 1#F9CC81

Color 2#FFBE42

Color 3#E67A26

Color 4#C84B31

Color 5#F4EDD6

Accessibility

Contrast checker

1.1:1Fail

1.9:1Fail

3.1:1AA18

1.3:1Fail

1.1:1Fail

1.8:1Fail

2.8:1Fail

1.4:1Fail

1.9:1Fail

1.8:1Fail

1.6:1Fail

2.5:1Fail