What if Mondriaan used CSS instead of paint?

Many people have tried to recreate a work of art by Mondriaan with CSS. It seems like a nice and simple exercise: rectangles are easy with CSS, and now with grid, it is easy to recreate most of his works. I tried it as well, and it turned out to be a bit more complicated than I thought. And the results are, well, surprising.

Here is an example where without too much thought I recreated one of his works, Tableau I with Red, Black, Blue and Yellow. I measured the widths and heights of all columns and rows, and turned these numbers into grid fractions. Then I picked the different colours, and tadaaa, here it is, a work of Mondriaan recreated with CSS.

It is indeed a nice and simple way to learn a thing or two about grid and maybe something about custom properties.

Is it really this simple?

Mondriaan used the so called primary colours of his time: red, yellow and blue. And he used the (theoretical) mix of these three colours, which would be black. And finally he used the absence of these three colours, which is of course white. Most of his famous paintings are made with these colour principles.

The problem with translating Mondriaan to the screen is the fact that you don’t mix pigments with CSS, but you mix light. And mixing light works differently than mixing paint.

For starters, the primary colours for mixing light are red, green and blue. Here is what the above painting looks like if you use the pure values:

But things get even weirder. When you mix all the primary colours with paint, you get black. But when you mix all primary colours with light, you get white. So if you agree me that the borders between all the squares on Mondriaan’s paintings were painted with a mix of all the colours, that would mean that these borders would be white if Mondriaan had used CSS. And this means that the squares that are painted with the absence of colours should be black, because that is what the absence of light looks like.

Here’s an example of what a theoretically correct painting by Mondriaan would look like if he had used CSS of paint.

Mondriaan’s paintings were about more than theory.

You could write a mondriaan generator with a bit of JavaScript. But I don’t think this is the tool that he would have used. He worked really hard on each painting to get the composition exactly right. He used to paint over his compositions many times before he thought the end result was good enough. And also the choice of colour was not as simple as writing `color: red;’. The colours were hand picked, and mixed until they looked exactly right according to the artist, which is not just simple colour theory, it is also about artistic vision.

So simply replacing the colours he used with the exact primary screen colours is probably not what he would have done. I think he carefully mixed pigments until he had the exact right colour red. With CSS he would probably have carefully adjusted the HSL values until the right colour was made.

Now there is no way to know what colours he would have picked exactly if he used CSS. So what I did is this: I measured the HSL values of the colours he used. Then I calculated the difference between the used hue and the theoretically correct hue. So for instance, Mondriaan uses a yellow that has a hue of 48, which is a difference of 12 from pure yellow. And so for this artistically more accurate version I used 108 instead of 120 as a value for green. And of course I also adjusted all saturation and lightless values accordingly.

Here you see a version of what a painting of Mondriaan would look like, with some freedom in assuming a similar outcome in his colour mixing methods.

A bit more about black and white

The black in the example above is truly black. Now if you look at Mondriaan’s painting you will see that his black is never fully black. I like to think that this is a result of him mixing colours that are not pure (which of course isn’t true, but it is a nice thought experiment). So what would it look like if we mixed the adjusted colours we used in the previous example? Well, it turns into an not quite white, but a light yellow.

There is also an issue with the white Mondriaan uses. It is almost never really white. Many rectangles are clearly grey, and others are almost white. This difference is pretty easy to calculate, of course. The white he used in the original painting has a lightness value of 90. So the black we use in the same rectangle in our CSS version should have a lightness of 10. And with these same translations, here’s the final version of the composition.

Primary colours

There is a fundamental problem with this whole blogpost I just wrote. As you may have noticed, Mondriaan never really used the primary colours in his paintings. The real primary colours when mixing paint are not red, yellow and blue, they are magenta, yellow and cyan. Which would mean that Mondriaan’s painting would have looked like this if he had been really dogmatic about his colours.

On the left you see a version of Mondriaan’s painting in which the true primary colours are used. And on the right the same picture, this time with artistically corrected colours.

This is probably the pallet Mondriaan would have used if he had added a print stylesheet to his works.

The final version.

I think it is time to reach a conclusion. If Mondriaan used CSS instead of HTML the painting Tableau I with Red, Black, Blue and Yellow would be called Tableau I with Red, White, Blue and Green. It would be much darker than what we now think of when we think of Mondriaan’s work. That is, as long as you look at the work on your screen. As soon as you decide to print it, it would turn into Tableau I with Magenta, Black, Cyan and Yellow.

And here is the final version of this exercise, with the print stylesheet, of course.

In a next blog post I may reflect on what his works would look like if his canvases were not fixed, but chaotic like they are on the web.