A sexy, secure live visualization of password field input
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example.html Removing box-sizing property Jun 25, 2014



A sexy, secure visualization of password field input

Chroma-Hash is a jQuery plugin 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 resulting color pattern is non-reversible, so no one could know what your password just from the colors.

For a more detailed description of Chroma-Hash, be sure to check out this blog post about it..


Actions speak louder than words. Try it out at: http://mattt.github.com/Chroma-Hash/


$("input:password").chromaHash({bars: 3, salt:"7be82b35cb0199120eea35a4507c9acf", minimum:6});
  • bars : number of bars displayed (1,2,3, or 4)
  • salt : value to be appended when calculating hash function
  • minimum : minimum number of characters needed for grayscale bars to be displayed in color


  • jQuery 1.3+

Ports, Implementations, and Adaptations

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

For the more acoustically-inclined, be sure to check out Sonic-Hash, which is like its older brother, but 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 Thompson


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