PLAY PODCASTS
Creating a background gradient from an image
Episode 201

Creating a background gradient from an image

Ryan talks to Sam about reproducing iOS's new image background treatment for his Open Graph Preview tool, opengraph.ing. They talk about different approaches for generating gradients from images, including finding the vibrant color of an image, luminosity-weighted averages, k-means clustering, and more.

Frontend First

December 12, 202448m 39s

Audio is streamed directly from the publisher (cdn.simplecast.com) as published in their RSS feed. Play Podcasts does not host this file. Rights-holders can request removal through the copyright & takedown page.

Show Notes

Ryan talks to Sam about reproducing iOS's new image background treatment for his Open Graph Preview tool, opengraph.ing. They talk about different approaches for generating gradients from images, including finding the vibrant color of an image, luminosity-weighted averages, k-means clustering, and more.

Timestamps:

  • 0:00 - Intro
  • 3:07 - Apple's new OG image gradient
  • 10:06 - Luminosity-weighted average
  • 14:22 - Finding the vibrant color of an image
  • 21:41 - Contrast ratios on favicons
  • 32:21 - K-means clustering
  • 41:25 - Refactoring UI tip about rotating the hue

Links: