Back to palettes

Palette

Sun Kissed Clementine

Bright and cheerful hues mimicking the zesty, sun-drenched vibrancy of ripe clementine oranges.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sun Kissed Clementine 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 Sun Kissed Clementine.

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

Data visualization

#FF8C00#FFA500#FFD700#FFEB3B#FFFACD

Palette guide

How to use Sun Kissed Clementine

Overview

The Sun Kissed Clementine palette bursts with bright and cheerful hues, mimicking the zesty, sun-drenched vibrancy of ripe clementine oranges. This energetic collection features a spectrum of oranges and yellows, from the deep `#FF8C00` and sunny `#FFA500` to the radiant `#FFD700` and luminous `#FFEB3B`, culminating in the softest `#FFFACD`. It's an ideal choice for designers and developers aiming to infuse projects with optimism, freshness, and a playful spirit. The palette's vibrant and inviting tones are perfect for creating engaging, uplifting experiences that capture attention and evoke a sense of warmth and happiness.

Best used for

  • Food and beverage branding, especially for citrus products
  • Children's books and educational materials
  • Summer-themed marketing campaigns and promotions
  • Energetic and playful website or app interfaces
  • Event branding for lively gatherings or celebrations
  • Creative and artistic projects requiring a cheerful touch

Suggested color roles

primary

Use `#FF8C00` as a bold, zesty primary for main calls-to-action, headlines, and key branding elements to convey energy.

secondary

Employ `#FFA500` for supporting visuals, subheadings, or as a vibrant background for sections needing a warm glow.

accent

Apply `#FFD700` for bright highlights, interactive states, or decorative elements that require a luminous, cheerful pop.

background

The softest hue, `#FFFACD`, provides an airy, warm base for content areas, allowing the more vibrant colors to shine without competition.

text

For optimal readability against these bright colors, a deep charcoal or black is recommended, or use `#FF8C00` for headlines on very light backgrounds.

Accessibility notes

  • Due to the high luminosity of this palette, ensure exceptionally dark text (like black or dark charcoal) on all colors, especially `#FFEB3B` and `#FFFACD`, to meet WCAG AA contrast.
  • Avoid placing light yellow text like `#FFEB3B` on any orange or yellow background within this palette, as contrast will be insufficient.
  • Interactive elements (e.g., buttons with `#FF8C00`) must have clear focus states and highly contrasting text, such as pure white.
  • Consider using a very dark neutral (e.g., #333333) for body text to guarantee readability across all palette combinations.

Recommended combinations

Zesty Pop

A light, fresh background with a bold primary and a slightly softer secondary for balanced energy.

#FFFACD · #FF8C00 · #FFA500

Golden Glow

A warm gradient or layered effect, moving from orange to bright yellow, ideal for sunny visuals.

#FFA500 · #FFD700 · #FFEB3B

Bright Accent

A dominant orange contrasted with a very light background and a radiant yellow accent for highlights.

#FF8C00 · #FFFACD · #FFD700

CSS variables

:root {
  --sun-kissed-clementine-1: #FF8C00;
  --sun-kissed-clementine-2: #FFA500;
  --sun-kissed-clementine-3: #FFD700;
  --sun-kissed-clementine-4: #FFEB3B;
  --sun-kissed-clementine-5: #FFFACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sun-kissed-clementine": {
        1: "#FF8C00",
        2: "#FFA500",
        3: "#FFD700",
        4: "#FFEB3B",
        5: "#FFFACD",
      }
    }
  }
}

Related searches

clementine color palettevibrant orange yellowsummer fruit colorscheerful bright schemesunny citrus palette

Palette colors

Hex values

Color 1#FF8C00
·
Color 2#FFA500
·
Color 3#FFD700
·
Color 4#FFEB3B
·
Color 5#FFFACD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.7:1Fail
1.9:1Fail
2.2:1Fail
2
1.2:1Fail
1.4:1Fail
1.6:1Fail
1.9:1Fail
3
1.7:1Fail
1.4:1Fail
1.1:1Fail
1.3:1Fail
4
1.9:1Fail
1.6:1Fail
1.1:1Fail
1.2:1Fail
5
2.2:1Fail
1.9:1Fail
1.3:1Fail
1.2:1Fail

Similar palettes

More like Sun Kissed Clementine

View all vibrant
Citrus Grove Delight
Citrus Zest Splash
Orchard Fruit Burst
Summer Citrus
Sunny Citrus Grove
Vibrant Citrus Medley