Wednesday, July 29th, 2009

Chroma Hash: Interesting visualization of your password

Category: CSS, jQuery

Matt Thompson has created a fun little jQuery plugin called Chroma-Hash that “dynamically visualizes secure text-field values using ambient color bars”:

Password entry can be frustrating, especially with long or difficult passwords. On a webpage, secure fields obscure your input with •’s, so others can’t read it. Unfortunately, neither can you—you can’t tell if you got your password right until you click “Log In”.

Chroma-Hash displays a series of colored bars at the end of field inputs so you can instantly see if your password is right. Chroma-Hash takes an MD5 hash of your input and uses that to compute the colors in the visualization. The MD5 hash is non-reversible, so no one could know what your password just from the colors. Your password will display the same sequence each time, so you can learn to expect “blue, red, pink”, for instance; if you instead see “green, purple, yellow”, you’ll know you typed it wrong.

Here is a snippet of the magic:


  1. $(this).css({position:   'absolute',
  2.                            left:       position.left + width - 2,
  3.                            top:,
  4.                            height:     height + "px",
  5.                            width:      8 + "px",
  6.                            margin:     5 + "px",
  7.                            marginLeft: -8 * (i + 1) + "px"
  8.                           }
  9.                     );
  10.               });
  12.               var id     = $(this).attr('id');
  13.               var md5    = hex_md5($(this).val());
  14.               var colors = md5.match(/([\dABCDEF]{6})/ig);
  15.               $(".chroma-hash").stop();
  17.               chromaHashesForElement(this).each(function(i) {
  18.                 $(this).animate({backgroundColor:"#" + colors[i]});
  19.               });

Posted by Dion Almaer at 5:35 pm

3.6 rating from 52 votes


Comments feed TrackBack URI

Some people will think it is related to the password’s strength.
What about a simple “match” indication next to the second password input when the values matches the first one?

Comment by frenchStudent — July 29, 2009

I recently finished up a project for Cisco WebEx where I implemented a “show password” feature using jQuery. It was a “show password” checkbox next to the password field that, when clicked, would turn asterisks into clear text and back. For example:

would switch to the clear text string they entered:

When unchecked it would do the opposite:

clear text switched to asterisks

Comment by cancelbubble — July 29, 2009

This weakens password security but as long as people’s eyes can’t measure 24-bit RGB values on the screen the problem is not significant. However a camera could do the trick, maybe with some color calibration algorithm based on the measured RGB from well known areas of the screen such as white windows backgrounds. Given the RGB values (or a small range of values) a rainbow table lookup will find the password candidates in a common password database quite quickly. If your password is very uncommon you’re probably safe, but you’re also likely to remember it well and have little problem typing it.

Letting people see the clear text password is obviously much worse and IMHO should be done only for webapps with very low security requirements.

Comment by pmontrasio — July 30, 2009

I love the elegant and simply code. very clean and neat looking.

frenchStudent: I think the location of the color stripes is not the best, if you’d create a visual connection between the two color stripes, actually connection them one to another, the bottom of the top one touching the top of the bottom one, you’d get a one continuous color stripe, and that could perhaps make things easier for first timers to understand what it stands for.

I too seeing it first time (without reading the description) was sure that this is strength indicator.

As to pmontrasio’s comment,
yeap, you’re right, with the current implementation that the colors change every time you type in a letter, you could very quickly discover the hash that was used, even if used with foreign letters.
I’d add a random string for every page load to be added to the final hash of the password.
That way it would be extremely hard to decrypt the hash.

Even the same password won’t look the same after reloading the page, but no one will notice this…

Comment by Eeeli — July 30, 2009

Personally I use this:

A checkbox that toggles the type attribute (mentioned by cancelbubble) works well.

Comment by WillPeavy — July 30, 2009

As frenchStudent said: Why not just print “Match” somewhere instead? The colorbars just worsen usability and security.

Comment by Stakka — July 30, 2009

The internet is full of advice, good and bad. You have to always consider the source. And I’d be especially aware of the source for anything that has to do with passwords or security.

It’s neat that people are exploring the authentication space. I think it is important that people do that. However, I’d caution people against implementing anything that isn’t battled tested and expert approved when it comes to matters of security.

Comment by zachstronaut — July 30, 2009

I went for “show password” switch on my current project. This one looks interesting but i guess it would need an explanation for normal users.

Comment by Schorsch — July 31, 2009

Sorry to join this conversation late, but this is actually a really good idea – but I would salt the MD5 Hash as that would prevent the issue of rainbow tables that someone was mentioning.

This concept of visual confirmation is used in a lot of random places, and I would agree that a lot of people don’t actually understand what’s going on until they get it wrong. On the login for Lotus Notes, for example, 4 random pictures iterate through as you type your password. I was in the room with someone who typed their password and said out loud “oh wait, no, that’s supposed to be in the top corner” and so they deleted their password and tried again.

This is far superior than “show password”, which is not only visually unsafe (onlookers, screen snoops), but requires user interaction from the end user. Chroma-Hash is passive, and I think a really good solution.

Comment by MattMcNamara — August 14, 2009

Leave a comment

You must be logged in to post a comment.