Palette

Sweet Citrus Bloom

A cheerful and zesty combination, reminiscent of sun-ripened fruits and blooming citrus groves.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sweet Citrus 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 Sweet Citrus Bloom.

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

Data visualization

#FFD700#FFA500#FF6347#FFC0CB#98FB98

Palette guide

How to use Sweet Citrus Bloom

Overview

The Sweet Citrus Bloom palette offers a cheerful and zesty combination, reminiscent of sun-ripened fruits and blooming citrus groves. Featuring a radiant gold (#FFD700), a vibrant orange (#FFA500), an energetic tomato red (#FF6347), a soft light pink (#FFC0CB), and a refreshing mint green (#98FB98), this collection is bursting with life and sweetness. It's perfect for designers and developers looking to inject a lively, fresh, and happy mood into their projects. Employ these exact hex codes to ensure your designs consistently capture the invigorating and playful spirit of a citrus bloom, bringing warmth and vitality to any application.

Best used for

Healthy food and beverage branding
Summer event promotions and marketing
Garden-themed designs and nurseries
Refreshing lifestyle blogs and websites
Children's product packaging
Vibrant digital campaigns and social media

Suggested color roles

primary

Use #FFA500 as the main brand color, for energetic call-to-action buttons, or prominent headlines that demand attention.

secondary

Apply #FFD700 for supporting elements, subheadings, or as a vibrant background for sections that need a bright lift.

accent

Utilize #FF6347 for bold statements, alerts, or key highlights to create a strong, immediate visual impact.

background

Employ #FFC0CB for soft content areas or as a gentle base for backgrounds, allowing brighter colors to truly pop.

text

Black or dark grey is recommended for text on lighter colors like #FFD700, #FFC0CB, and #98FB98. White text provides excellent contrast on #FFA500 and #FF6347.

Accessibility notes

Colors like #FFD700 and #FFC0CB require dark text for optimal readability and accessibility.
Ensure sufficient contrast when placing #FF6347 text on #FFA500 or vice versa, as their hues are similar.
Avoid using #FFC0CB as a primary text color due to its lightness, which can hinder readability.
Check contrast ratios for all critical text and interactive elements to meet accessibility standards.

Recommended combinations

Zesty Burst

Ideal for creating energetic banners, impactful headers, or vibrant call-to-action sections.

#FFD700 · #FFA500 · #FF6347

Fresh Bloom

Perfect for backgrounds or illustrations that convey a sense of natural freshness and sweetness.

#98FB98 · #FFC0CB · #FFA500

Lively Trio

Use for dynamic infographics or sections requiring a vibrant, yet balanced, visual appeal.

#FF6347 · #FFD700 · #98FB98

CSS variables

:root {
  --sweet-citrus-bloom-1: #FFD700;
  --sweet-citrus-bloom-2: #FFA500;
  --sweet-citrus-bloom-3: #FF6347;
  --sweet-citrus-bloom-4: #FFC0CB;
  --sweet-citrus-bloom-5: #98FB98;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-citrus-bloom": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF6347",
        4: "#FFC0CB",
        5: "#98FB98",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FFA500

Color 3#FF6347

Color 4#FFC0CB

Color 5#98FB98

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

1.1:1Fail

1.4:1Fail

1.5:1Fail

1.3:1Fail

1.6:1Fail

2.1:1Fail

1.5:1Fail

1.9:1Fail

2.3:1Fail

1.1:1Fail

1.3:1Fail

1.9:1Fail

1.2:1Fail

1.1:1Fail

1.6:1Fail

2.3:1Fail

1.2:1Fail

Similar palettes

More like Sweet Citrus Bloom

Sweet Citrus Bloom

See it in context.

Ready when you are.

Built with Sweet Citrus Bloom.

How to use Sweet Citrus Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Zesty Burst

Fresh Bloom

Lively Trio

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sweet Citrus Bloom