Palette

Golden Plains Bloom

Bright, joyful yellows celebrating the expansive, sun-drenched beauty of a vast plain in full bloom.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Golden Plains Bloom 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 Plains Bloom.

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

Data visualization

#F7D425#FFEB73#FFFCB5#C6A81E#9A7F18

Palette guide

How to use Golden Plains Bloom

Overview

The Golden Plains Bloom palette is a vibrant and cheerful collection of yellows, capturing the expansive, sun-drenched beauty of a vast plain in full bloom. Featuring a bright #F7D425, a softer #FFEB73, and the very light #FFFCB5, it offers a radiant gradient. Deeper, more grounding golds like #C6A81E and #9A7F18 provide necessary contrast and stability. This palette is exceptionally useful for designers and developers aiming to create energetic, joyful, and optimistic designs. It's ideal for projects that require a strong sense of warmth, growth, and natural brilliance, ensuring an uplifting user experience.

Best used for

Children's products or educational brands
Summer event promotions and marketing
Eco-tourism websites and brochures
Cheerful digital illustrations and art
Packaging for natural, organic goods
Uplifting social media graphics

Suggested color roles

primary

Use #F7D425 as the vibrant, cheerful yellow for main headings, key calls to action, or prominent graphical elements.

secondary

Apply #C6A81E as a deeper, grounding gold for subheadings, borders, or navigation elements, providing stability.

accent

Incorporate #FFEB73 as a softer, radiant highlight for subtle accents, hover states, or background patterns.

background

Utilize #FFFCB5 as the lightest, airy base color for content areas, offering a clean and bright canvas.

text

Employ #9A7F18 as a rich, dark gold for strong contrast in body text, ensuring excellent readability on lighter backgrounds. Black also works well.

Accessibility notes

Always use dark text, such as #9A7F18 or black, on lighter yellows like #FFFCB5 and #FFEB73 for optimal readability.
#F7D425 and #C6A81E may not have enough contrast for small text on #FFFCB5; thorough testing is advised.
For interactive elements, ensure sufficient contrast between different states (e.g., normal, hover, active).
Maintain WCAG AA standards, especially for body text and critical information, as bright palettes can challenge contrast.

Recommended combinations

Sunny Fields

Ideal for bright, airy user interfaces, header elements, or areas needing a strong sense of light and openness.

#F7D425 · #FFEB73 · #FFFCB5

Deep Gold Contrast

Perfect for strong headings, important buttons, or elements requiring high visual impact and readability.

#C6A81E · #9A7F18 · #F7D425

Gentle Radiance

Great for subtle backgrounds, decorative elements, or secondary information, offering a soft glow.

#FFEB73 · #FFFCB5 · #C6A81E

CSS variables

:root {
  --golden-plains-bloom-1: #F7D425;
  --golden-plains-bloom-2: #FFEB73;
  --golden-plains-bloom-3: #FFFCB5;
  --golden-plains-bloom-4: #C6A81E;
  --golden-plains-bloom-5: #9A7F18;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-plains-bloom": {
        1: "#F7D425",
        2: "#FFEB73",
        3: "#FFFCB5",
        4: "#C6A81E",
        5: "#9A7F18",
      }
    }
  }
}

Hex values

Color 1#F7D425

Color 2#FFEB73

Color 3#FFFCB5

Color 4#C6A81E

Color 5#9A7F18

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1.6:1Fail

2.7:1Fail

1.2:1Fail

1.1:1Fail

1.9:1Fail

3.2:1AA18

1.4:1Fail

1.1:1Fail

2.2:1Fail

3.7:1AA18

1.6:1Fail

1.9:1Fail

2.2:1Fail

1.7:1Fail

2.7:1Fail

3.2:1AA18

3.7:1AA18

1.7:1Fail

Similar palettes

More like Golden Plains Bloom