Palette

Sunflower Field Hues

Golden and radiant yellows and oranges, capturing the warmth and exuberance of a sun-drenched sunflower field.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunflower Field Hues 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 Field Hues.

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

Data visualization

#FEDD57#FDB82C#F48C00#E06D00#CC5B00

Palette guide

How to use Sunflower Field Hues

Overview

The "Sunflower Field Hues" palette radiates warmth and exuberance, a collection of vibrant yellows and oranges perfect for conveying energy and joy. Anchored by the bright #FEDD57 and deepening through rich tones like #FDB82C and #F48C00, this palette evokes summer and natural vitality. Designers can leverage its full spectrum, from the sunny #E06D00 to the deep, earthy #CC5B00, to create engaging interfaces and branding. This guide assists developers in implementing a cohesive visual language, ensuring that the energetic spirit of a sun-drenched field translates effectively across digital and print mediums, making designs feel lively and inviting.

Best used for

Summer-themed marketing campaigns
Children's product branding and packaging
Food and beverage industry websites (especially natural or healthy products)
Event promotions (festivals, outdoor events)
Educational materials for young learners
Energetic mobile application interfaces

Suggested color roles

primary

#FDB82C - A balanced, warm yellow, ideal for main calls-to-action, prominent headers, or key brand elements that need to feel inviting and central.

secondary

#E06D00 - A deep, rich orange that provides strong contrast to the lighter yellows, excellent for secondary buttons, important data points, or section separators.

accent

#FEDD57 - The brightest yellow, perfect for small, eye-catching elements, hover states, interactive components, or subtle highlights.

background

#CC5B00 - A deep, warm orange suitable for footer sections, vibrant card backgrounds where text is light, or as a rich backdrop for a bold statement.

text

Consider a dark charcoal or black (#222222) for optimal readability against all palette colors, especially the lighter yellows. For text on darker shades like #CC5B00, use white (#FFFFFF).

Accessibility notes

Ensure sufficient contrast when pairing lighter yellows like #FEDD57 with text; often requires dark text (e.g., black) to meet WCAG AA standards.
Avoid placing text in #FDB82C directly on #F48C00 or #E06D00 as contrast may be insufficient for smaller font sizes.
Use #CC5B00 or #E06D00 as backgrounds only for white or very light text to maintain legibility.
Test all color pairings, especially for interactive elements, to ensure a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Recommended combinations

Sunny CTA

#FDB82C for button background, #CC5B00 for text/icon, #FEDD57 for hover state or subtle highlight.

#FDB82C · #CC5B00 · #FEDD57

Warm Gradient

Create a smooth, energetic gradient for headers, hero sections, or background elements that need visual depth.

#FEDD57 · #F48C00 · #E06D00

Energetic Contrast

#E06D00 as a primary panel background, #FDB82C for card elements, and #CC5B00 for strong accents or borders.

#E06D00 · #FDB82C · #CC5B00

CSS variables

:root {
  --sunflower-field-hues-1: #FEDD57;
  --sunflower-field-hues-2: #FDB82C;
  --sunflower-field-hues-3: #F48C00;
  --sunflower-field-hues-4: #E06D00;
  --sunflower-field-hues-5: #CC5B00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunflower-field-hues": {
        1: "#FEDD57",
        2: "#FDB82C",
        3: "#F48C00",
        4: "#E06D00",
        5: "#CC5B00",
      }
    }
  }
}

Hex values

Color 1#FEDD57

Color 2#FDB82C

Color 3#F48C00

Color 4#E06D00

Color 5#CC5B00

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

2.5:1Fail

3.1:1AA18

1.3:1Fail

1.4:1Fail

1.9:1Fail

2.4:1Fail

1.8:1Fail

1.4:1Fail

1.7:1Fail

2.5:1Fail

1.9:1Fail

1.4:1Fail

1.3:1Fail

3.1:1AA18

2.4:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Sunflower Field Hues

Sunflower Field Hues

See it in context.

Ready when you are.

Built with Sunflower Field Hues.

How to use Sunflower Field Hues

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunny CTA

Warm Gradient

Energetic Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sunflower Field Hues