Back to palettes

Palette

Golden Hour Horizon

Radiant yellows and oranges, reflecting the serene beauty of a sunset horizon.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Golden Hour Horizon 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 Horizon.

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

Data visualization

#FFB347#FFC966#FFE285#FFFAAB#8B6B44

Palette guide

How to use Golden Hour Horizon

Overview

The Golden Hour Horizon palette presents radiant yellows and oranges, reflecting the serene beauty of a sunset horizon with a natural and warm feel. This collection, featuring the inviting orange of #FFB347, the soft yellow of #FFE285, and the grounding deep brown of #8B6B44, is perfect for designs that aim to evoke tranquility and natural elegance. Developers can integrate these hues into wellness apps or travel blogs for a comforting user experience, while designers will find them ideal for organic food branding or nature photography showcases. The lightest #FFFAAB provides a gentle canvas, making this palette versatile for projects requiring a soothing yet vibrant aesthetic.

Best used for

  • Travel and adventure blogs
  • Nature photography showcases
  • Wellness and meditation apps
  • Organic food branding
  • Cozy cafe interior design
  • Environmental awareness campaigns

Suggested color roles

primary

Use #FFB347 as a warm and inviting primary color for calls to action or key brand elements, reflecting a sunset glow.

secondary

Apply #FFC966 for supporting sections, subheadings, or as a background for featured content.

accent

Utilize #8B6B44 for strong text, grounding accents, or sophisticated borders, adding depth.

background

Implement #FFFAAB as a light, airy background, perfect for main content areas and providing good contrast for dark text.

text

Pair with #8B6B44 or a very dark brown/charcoal for optimal readability on lighter backgrounds. White text works well on #FFB347.

Accessibility notes

  • Ensure #8B6B44 provides excellent contrast for text on #FFFAAB and #FFE285.
  • White text on #FFB347 offers good contrast for headings and important buttons.
  • Avoid using #FFE285 for small body text on #FFFAAB, as the contrast might be insufficient.
  • Always check contrast ratios for all text and interactive elements to ensure accessibility for all users.

Recommended combinations

Horizon Depth

Ideal for creating impactful headers, navigation bars, or footers, blending warm hues with a grounding brown.

#FFB347 · #FFC966 · #8B6B44

Gentle Glow

Perfect for subtle background gradients, delicate illustrations, or layered UI elements, mimicking soft light.

#FFE285 · #FFFAAB · #FFC966

Earthy Sunset

Effective for natural product design, branding, or packaging that aims for an authentic and serene feel.

#8B6B44 · #FFB347 · #FFFAAB

CSS variables

:root {
  --golden-hour-horizon-2-1: #FFB347;
  --golden-hour-horizon-2-2: #FFC966;
  --golden-hour-horizon-2-3: #FFE285;
  --golden-hour-horizon-2-4: #FFFAAB;
  --golden-hour-horizon-2-5: #8B6B44;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-hour-horizon-2": {
        1: "#FFB347",
        2: "#FFC966",
        3: "#FFE285",
        4: "#FFFAAB",
        5: "#8B6B44",
      }
    }
  }
}

Related searches

sunset horizon palettewarm yellow orangenatural golden colorsserene nature paletteearthy golden hour

Palette colors

Hex values

Color 1#FFB347
·
Color 2#FFC966
·
Color 3#FFE285
·
Color 4#FFFAAB
·
Color 5#8B6B44
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.7:1Fail
2.8:1Fail
2
1.2:1Fail
1.2:1Fail
1.4:1Fail
3.2:1AA18
3
1.4:1Fail
1.2:1Fail
1.2:1Fail
3.8:1AA18
4
1.7:1Fail
1.4:1Fail
1.2:1Fail
4.6:1AA
5
2.8:1Fail
3.2:1AA18
3.8:1AA18
4.6:1AA

Similar palettes

More like Golden Hour Horizon

View all warm