warmvibrantmonochrome
Citrus Punch Color Palette
Citrus Punch is a warm, vibrant and monochrome color palette of 5 colors: Pumpkin (#ff6d00), Dark Orange (#ff8500), Orange (#ff9e00), Amber (#ffb700) and Gold (#ffd000). Its dominant hue is orange.
The darkest color, Pumpkin, on the lightest, Gold, gives a 1.91:1 contrast ratio — too low for text, so pair it with white or black. No pair in it passes AA for normal text, so use it for fills and accents. Pumpkin (#ff6d00) is its most saturated color and a natural choice for buttons and links.
Colors
- Pumpkin
- Dark Orange
- Orange
- Amber
- Gold
CSS Output
:root {
--citrus-punch-1: #ff6d00;
--citrus-punch-2: #ff8500;
--citrus-punch-3: #ff9e00;
--citrus-punch-4: #ffb700;
--citrus-punch-5: #ffd000;
}Citrus Punch on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
No two colors in this palette reach 3:1, so use them for fills and accents and set text in white or black.