Back to palettes

Palette

Sunbeam Haze

Gentle yellows and pale golds capture the soft, hazy warmth of sunbeams filtering through a window.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunbeam Haze 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 Sunbeam Haze.

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

Data visualization

#FFD700#FFCC33#FFD147#FFE368#FFF882

Palette guide

How to use Sunbeam Haze

Overview

The Sunbeam Haze palette captures the soft, ethereal warmth of sunbeams filtering through a window, offering gentle yellows and pale golds. Ranging from the bright #FFD700 to the subtle #FFF882, this collection provides designers and developers with a calm, airy, and inviting aesthetic. Key colors like #FFCC33 and #FFD147 create a smooth, harmonious gradient, perfect for serene and understated visual experiences. It's an excellent choice for projects that aim to convey tranquility, lightness, and a delicate warmth, ideal for minimalist or comforting applications.

Best used for

  • Serene digital interfaces and wellness apps
  • Children's book illustrations and educational materials
  • Subtle and minimalist branding
  • Light spring or summer themed marketing
  • Backgrounds for calming photography
  • Home decor accents for airy spaces

Suggested color roles

primary

Utilize #FFD700 as the brightest element, suitable for subtle highlights or to draw gentle attention.

secondary

Apply #FFCC33 for complementary elements, or to create a slightly richer layer of warmth.

accent

Due to the palette's lightness, a deep charcoal or black from outside the palette is recommended for strong accents or calls-to-action.

background

Employ #FFF882 as a light, airy background, providing a soft canvas for darker text.

text

For all text, a dark charcoal or black is essential for optimal readability and to provide necessary contrast against the pale yellow hues.

Accessibility notes

  • Critical: All colors are light. Text must be very dark (black or charcoal) for readability on any of these backgrounds.
  • Ensure WCAG AA or AAA contrast ratios for all text and interactive elements, as this palette presents significant challenges.
  • Avoid using any of the palette colors for text on another palette color without rigorous contrast testing.
  • Consider using larger font sizes and bolding for all text to enhance readability against these luminous, pale tones.

Recommended combinations

Hazy Gradient

Ideal for subtle background transitions, headers, or decorative elements where a soft visual flow is desired.

#FFD700 · #FFCC33 · #FFD147

Soft Sunlight

Effective for backgrounds and content areas where a delicate, luminous, and airy warmth is paramount.

#FFF882 · #FFE368 · #FFD147

Gentle Glow

Perfect for creating a balanced, serene layout that combines a light, open background with gentle, luminous accents.

#FFD700 · #FFF882 · #FFCC33

CSS variables

:root {
  --sunbeam-haze-1: #FFD700;
  --sunbeam-haze-2: #FFCC33;
  --sunbeam-haze-3: #FFD147;
  --sunbeam-haze-4: #FFE368;
  --sunbeam-haze-5: #FFF882;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunbeam-haze": {
        1: "#FFD700",
        2: "#FFCC33",
        3: "#FFD147",
        4: "#FFE368",
        5: "#FFF882",
      }
    }
  }
}

Related searches

hazy yellow palettesoft gold colorslight sunny schemecalm pastel yellowethereal light palette

Palette colors

Hex values

Color 1#FFD700
·
Color 2#FFCC33
·
Color 3#FFD147
·
Color 4#FFE368
·
Color 5#FFF882
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1:1Fail
1.1:1Fail
1.3:1Fail
2
1.1:1Fail
1:1Fail
1.2:1Fail
1.4:1Fail
3
1:1Fail
1:1Fail
1.1:1Fail
1.3:1Fail
4
1.1:1Fail
1.2:1Fail
1.1:1Fail
1.2:1Fail
5
1.3:1Fail
1.4:1Fail
1.3:1Fail
1.2:1Fail

Similar palettes

More like Sunbeam Haze

View all pastel