Back to palettes

Palette

Sunflower Ridge Path

Sunny yellows and warm golds paint a cheerful scene, like sunflowers lining a winding path along a golden ridge.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunflower Ridge Path 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 Ridge Path.

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

Data visualization

#D9A51F#F7CD47#FFEE8C#A67A15#7A570F

Palette guide

How to use Sunflower Ridge Path

Overview

The Sunflower Ridge Path palette bursts with vibrant, golden energy, evoking the warmth of a sun-drenched landscape. This collection of yellows and deep golds, including the bright `#F7CD47` and the rich `#D9A51F`, offers designers and developers a cheerful yet grounded foundation. Ideal for creating engaging user interfaces, impactful branding, or lively web designs, the palette is anchored by the deep, earthy tones of `#A67A15` and `#7A570F`, perfectly balanced by the soft glow of `#FFEE8C`. It's a versatile choice for projects aiming to convey optimism, natural beauty, and a welcoming, energetic mood.

Best used for

  • Summer-themed branding and marketing materials
  • Children's product packaging and websites
  • Food and beverage brands (e.g., honey, natural snacks)
  • Outdoor adventure or travel agency websites
  • Event promotions for festivals or markets
  • Lively blog designs and social media graphics

Suggested color roles

primary

Use `#D9A51F` as a strong, inviting brand color for calls to action, primary buttons, or main headings to convey warmth and reliability.

secondary

Employ `#F7CD47` for supporting elements, interactive states, or secondary navigation, adding a brighter, more active touch.

accent

Leverage `#FFEE8C` for subtle highlights, background textures, or decorative elements where a soft, luminous touch is desired.

background

The light `#FFEE8C` serves as an excellent soft background, while `#A67A15` can be used for rich, dark sections requiring light text for sophistication.

text

For primary body text on light backgrounds, `#7A570F` offers excellent readability and a warm, earthy contrast. For critical text, consider a true black for maximum legibility.

Accessibility notes

  • Ensure sufficient contrast when using `#FFEE8C` for text on any light background; it's best suited for larger display text or backgrounds.
  • Pair `#7A570F` or a dark charcoal for all body text on lighter shades like `#F7CD47` and `#FFEE8C` to maintain readability.
  • Avoid using lighter yellows like `#FFEE8C` for small icon or navigation text, as contrast can be challenging.
  • Test contrast ratios for interactive elements (buttons, links) to ensure they meet WCAG guidelines, especially when using `#D9A51F` or `#F7CD47`.

Recommended combinations

Sunny Contrast

Ideal for prominent headers (`#D9A51F`), primary body text (`#7A570F`), and clean backgrounds (`#FFEE8C`) in web and print.

#D9A51F · #7A570F · #FFEE8C

Golden Gradient

Excellent for creating visual depth in illustrations, section backgrounds, or subtle brand gradients that transition smoothly.

#F7CD47 · #D9A51F · #A67A15

Earthy Harmony

Suited for subtle UI components, decorative accents, or secondary content blocks where a harmonious, natural feel is desired.

#FFEE8C · #A67A15 · #F7CD47

CSS variables

:root {
  --sunflower-ridge-path-1: #D9A51F;
  --sunflower-ridge-path-2: #F7CD47;
  --sunflower-ridge-path-3: #FFEE8C;
  --sunflower-ridge-path-4: #A67A15;
  --sunflower-ridge-path-5: #7A570F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunflower-ridge-path": {
        1: "#D9A51F",
        2: "#F7CD47",
        3: "#FFEE8C",
        4: "#A67A15",
        5: "#7A570F",
      }
    }
  }
}

Related searches

vibrant yellow color palettegold and brown color schemesunflower inspired colorswarm energetic palettebright summer ui colors

Palette colors

Hex values

Color 1#D9A51F
·
Color 2#F7CD47
·
Color 3#FFEE8C
·
Color 4#A67A15
·
Color 5#7A570F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.9:1Fail
1.7:1Fail
2.9:1Fail
2
1.5:1Fail
1.3:1Fail
2.5:1Fail
4.3:1AA18
3
1.9:1Fail
1.3:1Fail
3.3:1AA18
5.6:1AA
4
1.7:1Fail
2.5:1Fail
3.3:1AA18
1.7:1Fail
5
2.9:1Fail
4.3:1AA18
5.6:1AA
1.7:1Fail

Similar palettes

More like Sunflower Ridge Path

View all vibrant
Arid Bloom Blaze
Bright Marigold Bloom
Citrus Burst Joy
Citrus Grove Delight
Citrus Zest
Citrus Zest Burst