Pina Colada
#f4deb3
Muted coconut cream yellow-green for airy UI
About Pina Colada
On my screen, Pina Colada reads like a toasted cream that's been warmed with a hint of honey, then lightened just enough to stay calm. It's still in the Green family, but the undertone leans more golden than the more bakery-yellow creams nearby, so it doesn't feel as bluntly "buttery." Compared to Gruyère Cheese, it's less dusty and more clearly sweet. Compared to Belgian Waffle, it holds more color and warmth instead of staying politely restrained.
I use it for light, sunlit UI where you want softness without going nearly neutral. Think marketing sites for food and hospitality brands, e-commerce product tiles, and email templates that need a background that looks intentional next to photography. It's a better fit than Butter Muffin when you need the warmth to show up a bit more, not just whisper, and it won't fight as hard as Butter Up. The one you reach for when the layout should feel friendly, but still designed.
Quirk: if you pair it with very pale off-whites, Pina Colada can look like a "miss" instead of a choice. Give it deeper accents or charcoal text so the color stays legible as a tone.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.