Palette

Citrus Morning Zing

Bright and cheerful, this palette captures the invigorating burst of morning citrus with sunny oranges and yellows.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Citrus Morning Zing 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 Citrus Morning Zing.

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

Data visualization

#FFE8D6#FFD0A4#FFB87B#FA7E0F#EC4E20

Palette guide

How to use Citrus Morning Zing

Overview

The Citrus Morning Zing palette is bright and cheerful, capturing the invigorating burst of morning citrus with sunny oranges and yellows. It features a delicate #FFE8D6 (Light Peach), a soft #FFD0A4 (Peach), a warm #FFB87B (Light Orange), an energetic #FA7E0F (Tangerine), and a bold #EC4E20 (Coral Red). This palette offers designers and developers a harmonious gradient of warm hues, perfect for creating inviting, dynamic, and visually appealing digital experiences. Its progression from soft to intense is ideal for conveying freshness, energy, and a lively spirit across various applications, from branding to UI design.

Best used for

Breakfast food product packaging
Morning routine apps and websites
Wellness and healthy lifestyle branding
Summer event promotions
Children's educational content
Digital marketing campaigns with an uplifting theme

Suggested color roles

primary

#FA7E0F (An energetic tangerine, perfect for main headers, prominent UI elements, or cheerful branding.)

secondary

#FFB87B (A warm light orange, ideal for supporting content, subheadings, or secondary calls-to-action.)

accent

#EC4E20 (A bold coral red, perfect for high-impact alerts, primary buttons, or key highlights that demand attention.)

background

#FFE8D6 (A soft, light peach base that provides an airy, warm, and inviting canvas for the entire design.)

text

#EC4E20 (For strong, energetic text on light backgrounds, or use a dark neutral like #333333 for general readability.)

Accessibility notes

Ensure high contrast when pairing #FFE8D6 or #FFD0A4 with light text; use #EC4E20 or #000000 for readability.
The darker tones, #FA7E0F and #EC4E20, offer good contrast for white or very light text.
Avoid using adjacent similar light shades for text and background to prevent readability issues, especially with #FFE8D6 and #FFD0A4.
For interactive elements, maintain at least a 3:1 contrast ratio against surrounding colors to meet WCAG AA standards.

Recommended combinations

Sunrise Gradient

Ideal for creating smooth, inviting gradients in hero sections or visual accents that convey warmth and energy.

#FFE8D6 · #FFB87B · #EC4E20

Zesty Pop

Excellent for energetic hero sections, with #FFD0A4 as background, #FA7E0F for main content, and #EC4E20 for striking CTAs.

#FFD0A4 · #FA7E0F · #EC4E20

Fresh Contrast

Use #FFE8D6 as a base, #FA7E0F for bold headings, and #FFB87B for supporting text or graphical elements.

#FFE8D6 · #FA7E0F · #FFB87B

CSS variables

:root {
  --citrus-morning-zing-1: #FFE8D6;
  --citrus-morning-zing-2: #FFD0A4;
  --citrus-morning-zing-3: #FFB87B;
  --citrus-morning-zing-4: #FA7E0F;
  --citrus-morning-zing-5: #EC4E20;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-morning-zing": {
        1: "#FFE8D6",
        2: "#FFD0A4",
        3: "#FFB87B",
        4: "#FA7E0F",
        5: "#EC4E20",
      }
    }
  }
}

Hex values

Color 1#FFE8D6

Color 2#FFD0A4

Color 3#FFB87B

Color 4#FA7E0F

Color 5#EC4E20

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

2.2:1Fail

3.1:1AA18

1.2:1Fail

1.8:1Fail

2.6:1Fail

1.4:1Fail

1.2:1Fail

1.5:1Fail

2.2:1Fail

1.8:1Fail

1.5:1Fail

1.4:1Fail

3.1:1AA18

2.6:1Fail

2.2:1Fail

1.4:1Fail

Similar palettes

More like Citrus Morning Zing

Citrus Morning Zing

See it in context.

Ready when you are.

Built with Citrus Morning Zing.

How to use Citrus Morning Zing

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunrise Gradient

Zesty Pop

Fresh Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Morning Zing