Palette

Sunny Clementine Zest

A cheerful and bright selection of oranges, like the vibrant, tangy zest of fresh clementines.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunny Clementine Zest 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 Clementine Zest.

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

Data visualization

#FFC000#FF9B00#FF7F00#FF6200#FF4800

Palette guide

How to use Sunny Clementine Zest

Overview

The Sunny Clementine Zest palette is a cheerful and bright selection of oranges, like the vibrant, tangy zest of fresh clementines. This energetic collection offers a beautiful gradient of warm, inviting tones, from the bright yellow-orange #FFC000 to the classic orange #FF9B00, the rich #FF7F00, the intense #FF6200, and culminating in the fiery #FF4800. Designers can leverage this palette to create designs that are bold, inviting, and full of positive energy, especially for food-related or summer-themed projects. Developers will find these hex codes excellent for crafting engaging UIs, impactful marketing, or any digital product aiming for a cheerful, energetic, and memorable visual identity with a strong warm bias.

Best used for

Fruit juice or smoothie bar branding
Summer holiday resort promotions
Outdoor adventure gear websites
Children's product packaging
Energetic sports team branding
Food blog or recipe website design

Suggested color roles

primary

Use #FF9B00 as a strong, inviting orange for main interactive elements or brand identity.

secondary

Apply #FFC000 as a bright, sunny yellow-orange for supportive elements or background accents.

accent

Utilize #FF4800 as a fiery, attention-grabbing red-orange for highlights or urgent notifications.

background

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

text

For text, use dark charcoal or black for readability on #FFC000. White works well on #FF9B00, #FF7F00, #FF6200, and #FF4800.

Accessibility notes

#FFC000 has low contrast with white text; use dark text (e.g., black or charcoal) for readability.
Ensure sufficient contrast when using adjacent orange shades, such as #FF9B00 and #FF7F00 for interactive elements.
The darker oranges like #FF6200 and #FF4800 provide good contrast with white text, making them suitable for clear headings or buttons.
Avoid using the lighter orange shades as primary text colors unless on very dark backgrounds.

Recommended combinations

Clementine Glow

Dynamic gradients, impactful hero banners, or vibrant product highlights.

#FFC000 · #FF7F00 · #FF4800

Zesty Burst

Bold call-to-actions, energetic infographics, or playful branding elements.

#FF9B00 · #FF4800 · #FFC000

Deep Orange

Strong brand identity, compelling headlines, or rich data visualizations.

#FF7F00 · #FF6200 · #FF9B00

CSS variables

:root {
  --sunny-clementine-zest-1: #FFC000;
  --sunny-clementine-zest-2: #FF9B00;
  --sunny-clementine-zest-3: #FF7F00;
  --sunny-clementine-zest-4: #FF6200;
  --sunny-clementine-zest-5: #FF4800;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunny-clementine-zest": {
        1: "#FFC000",
        2: "#FF9B00",
        3: "#FF7F00",
        4: "#FF6200",
        5: "#FF4800",
      }
    }
  }
}

Hex values

Color 1#FFC000

Color 2#FF9B00

Color 3#FF7F00

Color 4#FF6200

Color 5#FF4800

Accessibility

Contrast checker

1.3:1Fail

1.5:1Fail

1.8:1Fail

2.1:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

1.6:1Fail

1.5:1Fail

1.2:1Fail

1.3:1Fail

1.8:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

2.1:1Fail

1.6:1Fail

1.3:1Fail

1.1:1Fail

Similar palettes

More like Sunny Clementine Zest

Sunny Clementine Zest

See it in context.

Ready when you are.

Built with Sunny Clementine Zest.

How to use Sunny Clementine Zest

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Clementine Glow

Zesty Burst

Deep Orange

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sunny Clementine Zest