• Prototype 1: Single colour
  • Prototype 2: SVG logo
What is this?

Current state of logo upload colour handling

When users upload an SVG graphic to an Editor, there is no option to provide CMYK print values in their SVG. Currently, we handle this by automatically replacing all colours in the graphic with print-approved colours from the palette. This means initially the uploaded logo has completely different colours to what the user has uploaded, but the user can then manually find something they like.

What this prototype is testing

This prototype explores what it would feel like if we would automatically apply the most closely matching colours from the palette as possible.

How does is find the closest match?

This prototype uses "Euclidian Distance" (so, essentially the distance between the three R,G,B values, sort of like Pythagoras) between two sets of RGB values (the one the user uploaded, and the ones we store as display value) to identify the closest matching colour in a set. In this case, it's using the current Rapha primary and secondary palette.

Where could this go?

This could enable a user experience where the user is told that colours in their graphic need to be changed to print-approved colours, and starts them off with a close match - while still giving the option to change manually.

The questions this prototype is exploring are:

  • Would this improve the user experience of uploading graphics?
  • Does matching between two RGBs (neither of which properly reference a print output even make sense does it set wrong expectations?
  • Is Euclidian Distance the right way to find the best match mathematically? Probably not...


1. Pick a colour and click "Find Match"


2. See the closest match here:

...


Side-by-side comparison

Input colour Closest match


All colours considered in finding closest match:

Change data set: