Back to palettes

Palette

Grapefruit Sunset Spritz

A vibrant and juicy collection of citrus colors, evoking a refreshing, effervescent drink at sunset.

warmplayful5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Grapefruit Sunset Spritz 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 Grapefruit Sunset Spritz.

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

Data visualization

#FF8C00#FFA500#FFD700#FFC0CB#FF6347

Palette guide

How to use Grapefruit Sunset Spritz

Overview

The Grapefruit Sunset Spritz palette radiates a playful and energetic warmth, perfect for designs aiming to capture a refreshing, effervescent mood. Dominated by vibrant oranges and a soft pink, this collection includes bright Tangerine (#FF8C00), sunny Orange (#FFA500), luminous Gold (#FFD700), a delicate Pink (#FFC0CB), and a lively Tomato Red (#FF6347). Designers can leverage this palette to create engaging UIs, impactful branding, and cheerful digital experiences. Its high-energy tones are ideal for projects that need to convey vitality and joy, while the softer pink offers a balancing touch. Developers will find these hex codes straightforward for implementing a cohesive, visually striking theme across various platforms, ensuring a consistent, vibrant user experience that feels both modern and inviting.

Best used for

  • Summer-themed marketing campaigns and promotions
  • Food and beverage branding, especially for citrus drinks or snacks
  • Children's product design and educational apps
  • Playful e-commerce sites for fashion or lifestyle brands
  • Event invitations and decor for lively celebrations
  • Travel and tourism promotions for sunny destinations

Suggested color roles

primary

Utilize Tangerine (#FF8C00) as the dominant color for headers, main sections, or key brand elements to establish a strong, vibrant identity.

secondary

Employ Orange (#FFA500) for supporting elements, subheadings, or secondary calls-to-action, providing depth without overpowering the primary.

accent

Apply Tomato Red (#FF6347) sparingly for impactful calls-to-action, interactive elements, or alerts, ensuring high visibility and energy.

background

Use Pink (#FFC0CB) for light, airy backgrounds, large content blocks, or subtle UI elements to provide a soft, refreshing base.

text

For optimal readability, pair text with a dark charcoal (#333333) or a classic black against the lighter background shades. For headers, a rich dark brown or even a deep navy can offer sophisticated contrast.

Accessibility notes

  • Ensure sufficient contrast when using lighter colors like Pink (#FFC0CB) or Gold (#FFD700) for text backgrounds. Aim for WCAG AA or AAA compliance.
  • Be mindful of contrast between the vibrant oranges and reds. Use a contrast checker, especially for interactive elements, to ensure visibility for all users.
  • Avoid using #FF8C00 and #FFA500 together for critical information if color differentiation is the only indicator, as they are very similar in hue.
  • For text, always use a dark, high-contrast color (e.g., black or dark grey) against any of the palette's brighter shades to maintain readability.

Recommended combinations

Sunset Glow

Ideal for creating a warm, inviting header or a vibrant call-to-action block, with the pink providing a soft grounding.

#FF8C00 · #FF6347 · #FFC0CB

Citrus Burst

Perfect for a bright, energetic hero section or a playful infographic, emphasizing freshness and vitality.

#FFA500 · #FFD700 · #FF8C00

Playful Pop

Use this trio for playful accents, interactive buttons, or children's product packaging, offering a cheerful and approachable feel.

#FFC0CB · #FF6347 · #FFA500

CSS variables

:root {
  --grapefruit-sunset-spritz-1: #FF8C00;
  --grapefruit-sunset-spritz-2: #FFA500;
  --grapefruit-sunset-spritz-3: #FFD700;
  --grapefruit-sunset-spritz-4: #FFC0CB;
  --grapefruit-sunset-spritz-5: #FF6347;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grapefruit-sunset-spritz": {
        1: "#FF8C00",
        2: "#FFA500",
        3: "#FFD700",
        4: "#FFC0CB",
        5: "#FF6347",
      }
    }
  }
}

Related searches

sunset color palettevibrant orange pink color schemecitrus branding colorssummer design paletteplayful refreshing colors

Palette colors

Hex values

Color 1#FF8C00
·
Color 2#FFA500
·
Color 3#FFD700
·
Color 4#FFC0CB
·
Color 5#FF6347
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.7:1Fail
1.5:1Fail
1.3:1Fail
2
1.2:1Fail
1.4:1Fail
1.3:1Fail
1.5:1Fail
3
1.7:1Fail
1.4:1Fail
1.1:1Fail
2.1:1Fail
4
1.5:1Fail
1.3:1Fail
1.1:1Fail
1.9:1Fail
5
1.3:1Fail
1.5:1Fail
2.1:1Fail
1.9:1Fail

Similar palettes

More like Grapefruit Sunset Spritz

View all warm