Palette

Sunflower Meadow Dream

A radiant palette evoking the warmth and cheer of a sun-drenched field teeming with blooming sunflowers, full of life.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunflower Meadow Dream 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 Sunflower Meadow Dream.

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

Data visualization

#FFD700#FFA500#FF8C00#D2691E#A0522D

Palette guide

How to use Sunflower Meadow Dream

Overview

The Sunflower Meadow Dream palette radiates the cheerful warmth of a sun-drenched field, bringing vibrant energy to any design. Anchored by a brilliant golden yellow, #FFD700, it transitions through rich oranges like #FFA500 and #FF8C00, before settling into the earthy, comforting tones of #D2691E and a deep, grounding russet, #A0522D. This harmonious blend evokes natural beauty, making it ideal for projects aiming for a lively yet organic feel. Designers can leverage its spectrum from bright luminosity to deep warmth to create captivating visual narratives. Developers will find these hex codes versatile for both bold statements and subtle background textures, ensuring a cohesive and inviting user experience.

Best used for

Eco-friendly product branding and packaging
Summer event promotions and marketing materials
Children's book illustrations and educational apps
Travel and adventure blog designs
Food and beverage branding (especially natural or organic)
Website and UI designs seeking a warm, inviting aesthetic

Suggested color roles

primary

#FFD700 (Golden Yellow) - Use for prominent headers, calls-to-action, or elements requiring immediate attention to convey optimism and energy.

secondary

#FFA500 (Orange Yellow) - Excellent for supporting elements, subheadings, or as a background for sections where a warm, inviting glow is desired.

accent

#FF8C00 (Dark Orange) - Ideal for small, impactful elements, interactive states, or icons to add a burst of vibrant warmth and draw the eye.

background

#D2691E (Rust Brown) - Provides a rich, earthy backdrop for content, offering a natural depth that allows lighter colors to pop while maintaining warmth.

text

#A0522D (Deep Russet) - Best for darker, more readable body text on lighter backgrounds. For text on darker palette colors, use pure white or a very light off-white for optimal contrast.

Accessibility notes

Ensure sufficient contrast when pairing lighter colors like #FFD700 with text; a very dark brown or black is generally required.
Avoid using #FFA500 or #FF8C00 as background for light-colored text, as contrast will likely be insufficient for readability.
Use #A0522D or a similar dark neutral for primary body text on light backgrounds to meet WCAG contrast guidelines.
Carefully test interactive elements and links for adequate color contrast in both normal and hover/focus states to ensure usability for all users.

Recommended combinations

Golden Warmth

Perfect for vibrant headlines, main calls-to-action, and key navigational elements, offering high visibility and warmth.

#FFD700 · #FFA500 · #A0522D

Earthy Depth

Suited for natural product branding, autumnal themes, or backgrounds where a rich, grounded, yet inviting feel is desired.

#D2691E · #A0522D · #FFD700

Vibrant Pop

Excellent for highlighting important information, interactive buttons, or small graphic details to create energetic focal points.

#FF8C00 · #FFD700 · #A0522D

CSS variables

:root {
  --sunflower-meadow-dream-1: #FFD700;
  --sunflower-meadow-dream-2: #FFA500;
  --sunflower-meadow-dream-3: #FF8C00;
  --sunflower-meadow-dream-4: #D2691E;
  --sunflower-meadow-dream-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunflower-meadow-dream": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF8C00",
        4: "#D2691E",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FFA500

Color 3#FF8C00

Color 4#D2691E

Color 5#A0522D

Accessibility

Contrast checker

1.4:1Fail

1.7:1Fail

2.6:1Fail

4:1AA18

1.4:1Fail

1.2:1Fail

1.8:1Fail

2.8:1Fail

1.7:1Fail

1.2:1Fail

1.6:1Fail

2.4:1Fail