Will McLean
Process diary

Blend modes explained

Created: November 19, 2018

Overview

Blend modes explained is a tool that helps designers understand the methods behind blend modes. It can be found at blendmodes.info

What sparked the interest in blend modes?

They are something I have always used. We all discovered them in the first week of university. In those days we used them like crazy people. There were a lot of neon vomit photo collages produced. These days I can use them with a little more restraint, however, I still don’t understand them. I still just try every mode, at random, till it fits. I thought that if I knew a little more about them I might be able to pick in a more informed way and accurately predict the colours I would get when mixing with them. So I did some research.

Why did you decide to make the tool?

During the research I discovered that they were a bit more complex than I thought they would be. There is a lot of maths involved. The information on them was either a full colour picture example, or a bunch of formulas. Both of which are difficult to follow. I wanted to see the formula next to some colour swatches (not images) so that I could begin to grasp the maths. So that is what I made.

How did you build it?

I needed to have a go at using React. We had been talking about it at Pollen, where I work. Everyone seems to want things built in React. This project was perfect to learn it as it covered off all the topics in the “Main Concepts” section in the React documentation. I now feel like I have a grasp of the basic concepts.

Create React App was a pretty useful tool to get started quickly.

Why the crazy rave UI colour scheme?

At work, I deal with a LOT of forms all with grey, white or beige colour schemes. I want to look at something crazy. I will probably change them at some point but they can stay for now.

Incidentally the colours come from the list of HTML colour names that are provided as a dropdown in my code editor. So as well as making you feel like you are inside the yellow submarine they are quick to assign! A win win.

Is it finished?

Never! Nothing is ever finished. There is always an issue list. As of writing I still have a few blend modes to add The, Hue, Saturation and luminosity ones. No surprise they are the most complex. I want to add a check line in the results table that compares the maths to the actual colour. This is because I feel like I am getting a few issues from the rounding of the maths. I also want to add the ability for users to add their own swatches to the playground. I then want to allow users to generate two colours from a desired result. i.e. run the process in reverse. And then… Well, I’m not sure but I am sure I will think of something.

Resources:

This is a Case Study post.