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 is a jQuery plugin that visualizes secure text-field values using ambient color bars.

Chroma-Hash displays a series of colored bars at the end of field inputs so you can instantly tell if your password is right. The script takes a hash of your input to compute the colors in the visualization; the resulting color pattern is non-reversible, so no one can determine your password from the colors alone.

$("input:password").chromaHash({bars: 3, salt:"7be82b35cb0199120eea35a4507c9acf", minimum:6});

• bars : the number of bars displayed (1, 2, 3, or 4)
• salt : the value to be appended when calculating hash function
• minimum : the minimum number of characters needed for grayscale bars to be displayed in color

• jQuery 1.3+

Chroma-Hash is also available in your choice of JavaScript libraries and languages:

• CHChromaHashView (iOS) - @mattt (Mattt)
• ChromaHashView (Android) - @michaelevans (Michael Evans)
• YUI3 - @foxxtrot (Jeff Craig)
• Prototype - @wki (Wolfgang Kinkeldei)
• pyChroma (Python) - @leegao (Lee Gao)
• ChromaHash4j (Java) - @efi (Thomas Efer)

For the more acoustically-inclined, check out Sonic-Hash, which uses sounds instead of colors.

Inspired by Arc90 Lab's HashMask, by Chris Dary http://lab.arc90.com/2009/07/hashmask.php

Chroma-Hash uses Paul Johnston's Javascript MD5 implementation, and is distributed under the BSD License See http://pajhome.org.uk/crypt/md5 for more info.

Thanks to Ian Young for his suggestion to represent color components in 4-bits to increase overall security.

Mattt (@mattt)

Chroma-Hash is released under the MIT license. See the LICENSE file for more info.