Back to palettes

Palette

Sunny Citrus Pop

A cheerful explosion of zesty reds, oranges, and yellows, bringing the brightness of tropical fruits.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunny Citrus Pop 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 Sunny Citrus Pop.

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

Data visualization

#F94144#F3722C#F8961E#F9C74F#43AA8B

Palette guide

How to use Sunny Citrus Pop

Overview

The Sunny Citrus Pop palette is a cheerful and playful explosion of vibrant hues, perfect for projects demanding a fresh and modern aesthetic. It features a delightful progression from the zesty red #F94144 to the bright orange #F3722C, and the sunny yellow #F9C74F. A unique addition is the refreshing teal #43AA8B, which provides a sophisticated contrast to the warm citrus tones. This palette offers designers a versatile range for creating inviting and engaging experiences. Developers will find these hex codes excellent for dynamic UI elements, playful branding, or any digital product aiming for a tropical, bold, and memorable visual identity.

Best used for

  • Modern casual dining branding
  • Creative agency websites
  • Children's educational apps
  • Tropical-themed event invitations
  • Playful fashion accessories
  • Social media graphics for lifestyle brands

Suggested color roles

primary

Use #F3722C as a warm, inviting orange for main interactive elements or primary branding.

secondary

Apply #F9C74F as a bright, cheerful yellow for supportive elements or background sections.

accent

Utilize #43AA8B as a cool, refreshing counterpoint for unique accents or call-to-action buttons.

background

Employ #F9C74F as the lightest available color for a background, ensuring dark text for readability.

text

For text, use dark charcoal or black for readability on #F9C74F. White works well on #F94144, #F3722C, #F8961E, and #43AA8B.

Accessibility notes

  • #F9C74F requires dark text (e.g., black or charcoal) to meet WCAG contrast guidelines.
  • Ensure sufficient contrast when using #F94144 and #F3722C together for distinguishable elements.
  • The teal #43AA8B offers good contrast with white text, making it suitable for primary buttons or headings.
  • Avoid using multiple vibrant colors as body text; reserve them for headings or accents.

Recommended combinations

Tropical Burst

Playful illustrations, website hero sections, or brand identity.

#F9C74F · #F3722C · #43AA8B

Bold Statement

Highlighting key features, call-to-action buttons, or vibrant infographics.

#F94144 · #F8961E · #43AA8B

Zesty Fresh

Product packaging, cheerful social media posts, or children's book designs.

#F3722C · #F9C74F · #F94144

CSS variables

:root {
  --sunny-citrus-pop-1: #F94144;
  --sunny-citrus-pop-2: #F3722C;
  --sunny-citrus-pop-3: #F8961E;
  --sunny-citrus-pop-4: #F9C74F;
  --sunny-citrus-pop-5: #43AA8B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunny-citrus-pop": {
        1: "#F94144",
        2: "#F3722C",
        3: "#F8961E",
        4: "#F9C74F",
        5: "#43AA8B",
      }
    }
  }
}

Related searches

playful tropical color palettemodern citrus design colorsbold and refreshing web palettered orange yellow green schemevibrant brand identity colors

Palette colors

Hex values

Color 1#F94144
·
Color 2#F3722C
·
Color 3#F8961E
·
Color 4#F9C74F
·
Color 5#43AA8B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.3:1Fail
1.3:1Fail
2
1.2:1Fail
1.3:1Fail
1.8:1Fail
1:1Fail
3
1.6:1Fail
1.3:1Fail
1.4:1Fail
1.3:1Fail
4
2.3:1Fail
1.8:1Fail
1.4:1Fail
1.8:1Fail
5
1.3:1Fail
1:1Fail
1.3:1Fail
1.8:1Fail

Similar palettes

More like Sunny Citrus Pop

View all vibrant
Circus Tent Fun
Electric Carnival Joy
Electric Jungle Pop
Energetic Pop Art
Exotic Fruit Burst
Exotic Fruit Fiesta