Palette

Sun-Drenched Island Fruit

A burst of bright, cheerful colors inspired by exotic fruits and the lively atmosphere of an island festival.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sun-Drenched Island 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 Sun-Drenched Island Fruit.

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

Data visualization

#FFD700#FF6347#3CB371#FF1493#4169E1

Palette guide

How to use Sun-Drenched Island Fruit

Overview

The Sun-Drenched Island Fruit palette is a burst of bright, cheerful colors inspired by exotic fruits and the lively atmosphere of an island festival. This vibrant collection features a radiant gold (#FFD700), an energetic tomato red (#FF6347), a refreshing medium sea green (#3CB371), a playful deep pink (#FF1493), and a bold royal blue (#4169E1). It's an excellent choice for designs that aim to convey energy, fun, and a tropical, festive spirit.

Best used for

Tropical resort and travel marketing
Children's brands and educational apps
Party invitations and event branding
Lively mobile app interfaces and games
Summer festival and music event promotions
Playful web design and social media graphics

Suggested color roles

primary

Use #FFD700 as a bright, cheerful base for headers, playful graphics, or prominent design elements.

secondary

Apply #FF6347 to add energetic warmth, ideal for supporting sections, alerts, or interactive elements.

accent

Employ #FF1493 as a bold, playful pop, perfect for calls to action or to create high-impact highlights.

background

Utilize a very light, neutral off-white or white to let the vibrant colors truly pop and maintain a clean feel.

text

For optimal readability, use dark blue like #4169E1, black, or deep charcoal against lighter backgrounds, or white text on darker vibrant shades.

Accessibility notes

Many vibrant colors can be challenging for text contrast. Use dark text (e.g., black) on #FFD700 and #3CB371.
White text works well on #FF1493, #FF6347, and #4169E1 for headings and prominent information.
Avoid using light colors for text on other light colors, especially with the yellow and green tones.
Ensure sufficient contrast for all interactive elements and critical information.

Recommended combinations

Tropical Punch

Create energetic calls to action, festive graphics, or vibrant gradients for a lively feel.

#FFD700 · #FF6347 · #FF1493

Island Oasis

Ideal for playful branding, vibrant illustrations, or to evoke a refreshing, exotic atmosphere.

#3CB371 · #4169E1 · #FFD700

Fruit Medley

Use for bold headlines, dynamic backgrounds, or to create a striking and memorable visual impact.

#FF1493 · #FF6347 · #4169E1

CSS variables

:root {
  --sun-drenched-island-fruit-1: #FFD700;
  --sun-drenched-island-fruit-2: #FF6347;
  --sun-drenched-island-fruit-3: #3CB371;
  --sun-drenched-island-fruit-4: #FF1493;
  --sun-drenched-island-fruit-5: #4169E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sun-drenched-island-fruit": {
        1: "#FFD700",
        2: "#FF6347",
        3: "#3CB371",
        4: "#FF1493",
        5: "#4169E1",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FF6347

Color 3#3CB371

Color 4#FF1493

Color 5#4169E1

Accessibility

Contrast checker

2.1:1Fail

1.9:1Fail

2.6:1Fail

3.5:1AA18

2.1:1Fail

1.1:1Fail

1.2:1Fail

1.6:1Fail