Blend two or three hexadecimal colours [javascript]

A quick and very simple snippet I just wrote to blend two hex colours together based on a desired percentage. I wrote this to set the colour of a password strength meter – could also be used for a progress bar or any similar application.

So that¬†version does all the calculation on the fly – feed in any two colours whenever you want to get the result. Odds are however, you’ll be working with a fixed pair of colours normally, and recalculating all those, admittedly simple numbers, is a waste of CPU. Here is a version that ¬†calculates all the key values beforehand, and works with the complexify jQuery plugin []:

Okay, all well and good so far. In my case I have a strength meter that transforms from red to green via all the colours in-between!

There’s a word for such colours, now what was it?

Oh yeah. Fugly.
They all naaaaasty browns.

What we really want is a nice mid-way colour, a good ‘warning’ orange, so we go from danger, to warning, to safety in a nice smooth transitions.

Well, all we need to do is calculate a few more variables and we are there:


What’s wrong here? DRY, baby, DRY! Don’t Repeat Yourself. That massive stack of vars can be broken down with some little functions to reduce the humidity around here. But I don’t have time for that right now. The overseer is cracking his whip..

A demo would be nice, wouldn’t it? Tough. I’ve got work to do. Sort it out on your own.

And oh look! I FINALLY have syntax highlighting on the new site! At some point I will have to trawl through the old posts and get them formatted and highlighted.
One day…

Leave a Reply

Your e-mail address will not be published. Required fields are marked *