Palette

Twilight Amber Radiance

Luminous golds and deep ambers reflecting the rich, serene light of a setting sun.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Twilight Amber 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 Twilight Amber Radiance.

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

Data visualization

#A36A00#C28200#E09B00#FFB400#FFD800

Palette guide

How to use Twilight Amber Radiance

Overview

The "Twilight Amber Radiance" palette captures the serene yet rich glow of a setting sun, featuring a spectrum of luminous golds and deep ambers. This collection exudes warmth, luxury, and a sophisticated elegance. Key colors range from a deep amber gold `#A36A00` to a vibrant, luminous gold `#FFD800`, with intermediate shades like rich gold `#C28200` and bright amber `#FFB400`. The harmonious progression of these warm tones makes this palette ideal for designs that aim to convey opulence, natural beauty, and a comforting, radiant atmosphere, suitable for high-end brands or celebratory themes.

Best used for

Luxury branding and corporate identity
Autumnal home decor and interior design
High-end jewelry and accessory promotions
Evening event invitations and decor
Sophisticated digital interfaces and websites
Gourmet food and beverage packaging with a premium feel

Suggested color roles

primary

Use `#A36A00` as a deep, luxurious primary color for branding, main headings, or foundational design elements.

secondary

Apply `#C28200` for subheadings, navigation, or as a rich supporting color, enhancing the golden glow.

accent

Introduce `#FFD800` as a bright, luminous accent for highlights, calls-to-action, or decorative elements to add radiance.

background

Employ `#E09B00` as a warm mid-tone amber background, or pair with a dark brown or black for dramatic contrast.

text

Utilize black or very dark brown for text on lighter golds like `#FFD800` or white text on deeper ambers like `#A36A00` for optimal readability.

Accessibility notes

Lighter golds like `#FFD800` and `#FFB400` require dark text (black or very dark brown) for sufficient contrast and readability.
Ensure `#A36A00` provides good contrast when used as a background; white or very light text will be most legible.
Avoid using mid-tone golds like `#E09B00` for small text on light backgrounds due to potential low contrast.
For critical UI elements, aim for a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

Recommended combinations

Golden Gradient

Creates a smooth, rich transition from deep amber to mid-tone gold, perfect for elegant backgrounds or visual depth.

#A36A00 · #C28200 · #E09B00

Sunset Glow

Combines bright, luminous golds with a mid-tone amber, ideal for highlighting elements or conveying a radiant warmth.

#FFB400 · #FFD800 · #E09B00

Rich Contrast

Pairs the deepest amber with the brightest gold and a rich intermediate, creating a striking and luxurious visual impact.

#A36A00 · #FFD800 · #C28200

CSS variables

:root {
  --twilight-amber-radiance-1: #A36A00;
  --twilight-amber-radiance-2: #C28200;
  --twilight-amber-radiance-3: #E09B00;
  --twilight-amber-radiance-4: #FFB400;
  --twilight-amber-radiance-5: #FFD800;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-amber-radiance": {
        1: "#A36A00",
        2: "#C28200",
        3: "#E09B00",
        4: "#FFB400",
        5: "#FFD800",
      }
    }
  }
}

Hex values

Color 1#A36A00

Color 2#C28200

Color 3#E09B00

Color 4#FFB400

Color 5#FFD800

Accessibility

Contrast checker

1.4:1Fail

1.9:1Fail

2.6:1Fail

3.3:1AA18

1.4:1Fail

1.8:1Fail

2.3:1Fail

1.9:1Fail

1.4:1Fail

1.3:1Fail

1.7:1Fail

2.6:1Fail

1.8:1Fail

1.3:1Fail

3.3:1AA18

2.3:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Twilight Amber Radiance

Twilight Amber Radiance

See it in context.

Ready when you are.

Built with Twilight Amber Radiance.

How to use Twilight Amber Radiance

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Golden Gradient

Sunset Glow

Rich Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Twilight Amber Radiance