This is pretty, but non-reversible it isn't. The colors update with every keystroke, making it easy to determine letter by letter, which keys are being pressed. This is a significant hole in many situations (screencasts, recorded presentations, or anywhere someone can point a camera at your screen).

Simple fix: Wait for 300ms of keyboard inactivity before computing the colors. This way you only get the colors when the person is done typing, eliminating the possibility of key by key color analysis.

I don't see the utility of this compared to simply showing 'passwords are identical / not yet identical' live. Perhaps I'm missing something.

OK, so a user makes a mistake, and they notice their n characters in the first field and their n characters in the second field generate different colors.

How does this help them determine which of the two fields has what they intended to enter?

Also since the user types each field at a separate time, how does the character-by-character hashing help? What utility to the user is there from, having typed 'password' into the first field which shows brown and blue, knowing that typing 'p' in the second field made the second field green?

Now for some fun Douglas Hofstadter self-reference.

Challenge:

Can someone find a password that describes the colors it makes?

e.g. "redgreenblue" shows red, green, and blue

Cool, but still vulnerable to attack by someone who can record video (or with really good memory). Even though the visualization is taken from a relatively small set of three-colour triplets, an attacker who has seen the visualization for every prefix of the password has enough information to figure out the password in linear time.

You could use a nonce when you have two password boxes, so that the two boxes match, but the hash cannot be reversed by someone who just sees the sequence.

However, this would mean the hash is different each time, so it would be no good for confirming your password is correct before you login. For the registration case, just show a tick when the fields are equal. Or just wait for the round-trip, it's not that bad.

Frankly, the last month's talk about improving password fields is boring: it doesn't need doing. I type passwords without thinking, about twice the speed I type normally, and I don't make mistakes.

Something I'd like to see a password plugin/script that hashes my password with the site URL, so if they lose my password, its not my password they lose, its a site specific hash - anyone know of one?

Looks nice, but what about people who are colorblind?

Thanks for all of your feedback so far! I just posted a bit of explanation and a response on my blog: http://mattt.me/2009/07/chroma-hash-a-belated-introduction/

As others have noted, this is not "non-reversible", at least in the current incarnation. Part of the problem is that if you type an 'a' you always get the same three color triplet.

It seems to me that the simplest fix would be to add something like a seed value to the input or the triplet colors and then randomly generate the seed each time the page is loaded. At that point someone replaying or recording the colors would have no idea what seed would have been generated, but as long as both fields use the same seed the color triplet would be identical for both.

It's certainly a shiny way of dealing with hiding password from over-the-shoulder leaks while still allowing for verification; I agree with chaosmachine, it is very worth only showing the final result, and not the intermediary steps, even though that wouldn't be as pretty.

I'd love it if my keyring showed me the color combo for my password at each site --- then if my computer is stolen my passwords don't go with it; but when I get to a site I haven't logged in to for a few months, I don't have to try ten different passwords to remember which one I used.

I'm a developer and I can't even guess what the visualization "means" in under 10 seconds. I don't get the point of it much less see any practical utility for this...

Neat css trick, though!

What if this only displayed one color instead? It would be much more secure against snooping, but will still provide a large portion of the benefit. Sure, the number of false collisions would go up a ton, but the odds of trying to type the same thing and accidentally typing do different things that collide would be relatively small.

I really like that- it would be nice to see that become popular for inputting passwords. It's a nice way to check to see if your confirmed password is the actual password; Furthermore, it might even help one generate more complex passwords because he or she might want a certain set of colors.

Why not try hashing on the result of some operation (xor would be bad because, well, you know) on the password and the challenge together, and not displaying the hash until the password and challenge are the same length?

Not to be pedantic, but mattt: your h2 font family is "Palantino". Otherwise, this looks pretty nifty.

I do not have time to read the code. But if the colors are generated using one way hash, this would be great to have on every site. Using of colors can be replaced by showing the hash in plain text. Everybody would remember their password colors, and typos in password would be history.

What an incredibly good idea! It would probably not be too difficult to build this as a firefox plugin, so that all password fields (or all blanked out input fields) on the web will automatically get this feature... Anyone? :-)