This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Random colour channel transitions

I’ve been playing with some random stuff lately. I created billions and billions of random layouts, random rectangles, random triangles, random quadrilaterals, random ducks, random white images of random size, and random blobs. These are all generated images with random dimensions and random colours. Nothing interactive really, and not very dynamic either. I decided to create an animated blob. I wanted to learn how animations work in SVG (weird!), and I wanted to see what dynamic randomness looks like.

Animating the blob with SVG is not very hard. No JavaScript needed at all. I’m not going to explain how it works in this post, here’s an introduction that helped me on the way. Animating the colours turned out to be more tricky. The blob changes colour in Firefox, but not in Webkit/Blink browsers. No idea why. The background animates with CSS animations though, and they are supported much better. While playing with it, I noticed that some of the transitions between certain colours looked quite dramatic, while others looked very smooth. This made me wonder how a transition between colours works exactly. Does the browser use RGB colours and then adjust all three digits from rgb(163,118,68) to rgb(29,62,62) in the available steps? And if so, does this result in the most smooth transition possible?

I have no idea.

And I really can’t get my head around it, so I can’t even theoretically think what it does exactly. So I decided to create six alternative ways to transition from one colour to another. They might result in more smooth transitions, or so I thought. Instead of using RGB — which is for computers — I decided to use HSL, which is for humans. And instead of transitioning the Hue, Saturation and Lightness channels all at once, I decided to transition them one by one to see what happens. All transitions from one colour to the other happen in approximately three seconds. So one second for each channel:

If you think time should be spent in a profitable manner, this was a pretty useless exercise. But if you don’t mind wasting a few hours on some random nonsense, it was time well spent. Now that I see it, I understand that yes, of course, three transitions in a row are much more obvious to see than three transitions all at once. And if somebody had told that a few days ago, I wouldn’t have created these. Lucky for you, nobody told me. You can now see with your own eyes how it works. You might even find a use for it!


    • Martijn
    • #

    Those 7 examples pages are all entirely white…

    • Vasilis
    • #

    @Martijn, hmm, of course. I forgot to make a fallback for browsers that don’t support the vh unit. You should see a colour now. It could be that your browser doesn’t support the HSL colour notation and CSS animations too though…