ع

Citrus Splash

Juicy lemon, orange and grape tones.

≈ Saffron
≈ Neon Orange
≈ Error Red
≈ Rebecca Purple
≈ Pacific Blue

Color codes

HEXRGBHSLCMYK
hsl(47, 95%, 52%)cmyk(0%, 20%, 94%, 2%)
hsl(19, 94%, 56%)cmyk(0%, 59%, 85%, 3%)
hsl(354, 81%, 56%)cmyk(0%, 77%, 70%, 8%)
hsl(271, 54%, 39%)cmyk(34%, 70%, 0%, 39%)
hsl(187, 58%, 53%)cmyk(67%, 8%, 0%, 20%)

CSS

:root {
  --citrus-splash-1: #F9C80E;
  --citrus-splash-2: #F86624;
  --citrus-splash-3: #EA3546;
  --citrus-splash-4: #662E9B;
  --citrus-splash-5: #43BCCD;
}

How these colors work together

It pairs opposite hues on the color wheel for strong, lively contrast. Overall it reads warm. Lightness spans 17 points, which sets how much contrast you can create.

1 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is ⁦#F9C80E⁩ on ⁦#662E9B⁩ (5.47:1).

Citrus Splash — readable text using the best pair.

Suggested applications

  • Seasonal campaigns, travel and food brands.
  • Interface themes: use the lightest color for backgrounds and the darkest for text.
  • Brand kits, social graphics and presentations.

#citrus#vivid#fruit

Check accessibility Simulate color blindness CSS variables

Frequently asked questions

How do I use the Citrus Splash palette?
The Citrus Splash palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.
Which colors in this palette are best for text?
Use ⁦#F9C80E⁩ on ⁦#662E9B⁩: it has a contrast ratio of 5.47:1.
Can I download this palette?
Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.

More palettes

Beach Day#FFD166 #F4A261 #2A9D8F #E9F5DB #264653Watermelon Sorbet#FF595E #FF924C #FDF0D5 #8AC926 #2B9348Tropical Leaves#004B23 #007200 #38B000 #9EF01A #FFBE0BClean Blog#FFFFFF #F3F4F6 #374151 #111827 #2563EBDenim Days#F1F1EE #C8D3E0 #6C8EBF #2F4F7F #1A2238Dusty Blue Ceremony#F4F6F8 #CFD9E2 #9FB3C8 #61789A #D6B88F