My favourite Net-A-Porter colour is black.

(I like it so much I made a poster)

Maybe you like something more striking. Red?

Designers like Missoni know how to make beautiful combinations of colours.

TLDR

I'm a software developer in Net-A-Porter's Catalogue Management team. We worry about classification, filtering and ranking. On this page you're not seeing products filtered by colour, but products ordered by their similarity to a palette.

Go for Bold

Net-A-Porter's Spring Summer 2022 marketing campaign, "Go for Bold", centred around a collection of colourful products. The campaign photography (which I love) used dramatic angles, shadows and vivid palettes. Marketing wanted to add a technology element to the project and one idea was to use palettes as a route to finding products.

Ultimately this idea was binned for something else, but Kris and Naz from our Future Strategy and Design team had already discussed how we might do this with Google, who had done something similar with Art Palette. I was too attached to the idea and what Google had done to not build it anyway.

How it Works

The starting point was to identify a colour palette for every product. I used ColorThief to sample product images and extract the five most dominant colours from each. These colours would define a product's palette.

I needed to score how similar any two palettes were. A colour is a point in 3D space made up of Red, Green and Blue (RGB) coordinates. A Euclidean distance measures how close any two points in that 3D space are. Unfortunately, proximity in RGB is not a good proxy for how our eyes and brains perceive colour similarity. An alternative to RGB is CIELAB which was designed to represent colour in a way that more closely aligns with human perception. Euclidean distances between CIELAB colours do provide a good proxy for perceived colour similarity.

With five CIELAB colours per palette, measuring the distance between any two palettes (ignoring the order of colours) would mean 25 distance calculations. Not practical in a realtime query. For a catalogue the size of Net-A-Porter it would mean executing over a million calculations to find the closest palettes.

This is where I leant heavily on what Google had done with a clever optimisation trick. Offline, Goolge had calculated the distance between every possible palette in the colour space. Those distance values were then used to train a machine learning model to predict how similar any two palettes were. Removing the final layer in that model provided embeddings that represented the palettes in an n-dimensional space. Significantly, that space would locate similar palettes near to each other. These embeddings could be used to measure the distance between palettes directly, replacing 25 calculations with one.

The final step was to create an index of palette embeddings for the catalogue. An index provides a fast way to search for the nearest neighbours of any palette and to the products represented by those palettes. I used Jon Chamber's Vantage Point Tree implementation as an in-memory index.

What makes this fun is that with an index of embeddings and a way of converting a palette to an embedding it's possible to search for products that are the nearest neighbour to any palette. There's no reason a palette needs to come from a product image.

Maybe you want to find products that have a Starry Night palette?

  1. Google's Art Palette and source code.
  2. Lokesh Dhakar's ColorThief.
  3. Jon Chamber's VP Tree implementation.
  4. Per Bang's colour names.

Should Have Been Listening to Phoebe Bridgers

Spotify's Wrapped is very shareable but what if it took a longer term view? What if it considered the full thirteen years I've been with Spotify?

My Favourite Net-A-Porter Colour is Black

Net-A-Porter's Spring Summer 2022 marketing campaign, "Go for Bold", centred around a collection of colourful products. Marketing wanted to add a technology element and one idea was to use palettes as a route to finding products. Ultimately this was binned, but I built it anyway.

Gigi Hadid

Vogue Arabia's Gigi Hadid cover was one of Peter Lindbergh's final shoots. Black and white, stripped back, with a simple textured background and defiantly un-retouched, this is a typical, beautiful Lindbergh image.

Beyoncé

It's our loss that Beyoncé doesn't do magazine photo shoots any more. In the early 2010s she graced some of the finest fashion stories. Out of all these, it's Alasdair McLellan's cover for The Gentlewoman that I love the most.

Nautical Alessandra Ambrosio

This is the second Boo George shoot with Alessandra Ambrosio that I’ve written about. If I had to pick the perfect fashion picture this would be it.

Pregnant Alessandra Ambrosio

Alessandra Ambrosio has done everything from the Next catalogue, through Victoria’s Secret shows, to high fashion. In this image, Boo George was able to do something different.

Has Roger Federer Perspired?

That Roger Federer does not sweat had become ingrained thinking, the sort of idea we were looking to challenge. Was it real or just a lazy cliche? We had IBM’s Wimbledon match data for all the top players and using Weather Underground we pulled in temperature data for those matches. This let us see the number of matches played by player and temperature.

Physical Web and Physical Meetings

As an experiment in using the Physical Web I wanted to create a voting system for physical meetings. A meeting would have a current question and attendees could vote with one click. There would be no entering URLs, downloading apps, or scanning QR codes.

Hello. I'm Darren Shaw, a software developer at Net-A-Porter. I also play at being a portrait photographer. If you're interested in working together please get in touch.