Palette

Vibrant Market Fruit

A bright, cheerful mix of market fruits, bursting with fresh, lively energy.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vibrant Market Fruit 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 Vibrant Market Fruit.

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

Data visualization

#FF5733#FFC300#DAF7A6#C70039#900C3F

Palette guide

How to use Vibrant Market Fruit

Overview

The Vibrant Market Fruit palette bursts with fresh, lively energy, reminiscent of a tropical fruit stall. This collection features a bright orange-red (#FF5733), sunny yellow (#FFC300), a crisp light green (#DAF7A6), a deep berry red (#C70039), and a rich, dark maroon (#900C3F). Ideal for designers and developers creating cheerful, healthy, or energetic brands, these colors evoke natural goodness and vitality. The strong contrasts and vibrant tones make this palette excellent for designs that aim to be engaging, appetizing, and full of life, from digital interfaces to physical product packaging.

Best used for

Juice bar and healthy food branding
Summer product packaging and promotions
Children's educational apps or toys
Fitness and wellness blog designs
Tropical travel agency marketing
Gardening and fresh produce websites

Suggested color roles

primary

Use #FF5733 (Orange-Red) for energetic calls-to-action or main headings, conveying a sense of vitality and excitement.

secondary

Employ #FFC300 (Yellow) for supporting information, cheerful backgrounds, or elements that need to feel bright and inviting.

accent

Apply #C70039 (Deep Red) for impactful highlights, important notifications, or to add a touch of rich, berry-like depth.

background

Utilize #DAF7A6 (Light Green) for clean, refreshing backgrounds that provide a natural canvas for vibrant foreground elements.

text

For light backgrounds like #DAF7A6, use #900C3F (Dark Maroon) or black for excellent readability. For dark backgrounds, white or #FFC300 works well.

Accessibility notes

Ensure sufficient contrast for text on #DAF7A6 (Light Green) and #FFC300 (Yellow); dark text is always recommended.
Avoid using #FF5733 (Orange-Red) for small body text, especially on busy or similarly bright backgrounds.
The deep #900C3F (Dark Maroon) provides excellent contrast for lighter text and can be used for critical information.
Carefully check color combinations for interactive elements to meet WCAG contrast standards.

Recommended combinations

Fruity Freshness

A bright and inviting combination, perfect for showcasing fresh produce or healthy lifestyle brands.

#FF5733 · #FFC300 · #DAF7A6

Rich Berry Blend

Creates a more sophisticated yet still vibrant feel, ideal for gourmet fruit products or autumnal themes.

#C70039 · #FFC300 · #900C3F

Tropical Contrast

Offers a strong visual impact with a light green base, accented by bold orange-red and deep maroon for dynamic designs.

#DAF7A6 · #FF5733 · #900C3F

CSS variables

:root {
  --vibrant-market-fruit-1: #FF5733;
  --vibrant-market-fruit-2: #FFC300;
  --vibrant-market-fruit-3: #DAF7A6;
  --vibrant-market-fruit-4: #C70039;
  --vibrant-market-fruit-5: #900C3F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vibrant-market-fruit": {
        1: "#FF5733",
        2: "#FFC300",
        3: "#DAF7A6",
        4: "#C70039",
        5: "#900C3F",
      }
    }
  }
}

Hex values

Color 1#FF5733

Color 2#FFC300

Color 3#DAF7A6

Color 4#C70039

Color 5#900C3F

Accessibility

Contrast checker

2:1Fail

2.7:1Fail

1.9:1Fail

2.9:1Fail

2:1Fail

1.4:1Fail

3.7:1AA18

5.7:1AA

2.7:1Fail

1.4:1Fail

5.1:1AA

7.7:1AAA

1.9:1Fail

3.7:1AA18

5.1:1AA

1.5:1Fail

2.9:1Fail

5.7:1AA

7.7:1AAA

1.5:1Fail

Similar palettes

More like Vibrant Market Fruit

Tropical Citrus Burst

Tropical Fizz Burst