Welcome to bytebang » The blog about all and nothing » Auto-colored labels for bootstrap

Auto-colored labels for bootstrap

Jul 13 2018

The Problem

I wanted to use bootstrap labels for visual grouping. That means that labels with the same content should have the same color.


This can be done manually, but it is a boring task to come up with new colors every time you 'invent' a new label.

The Solution

My approach is that the content of the label is somehow hashed and afterward transformed into a color.

// Converts a String to a color. The more similar strings are,
// the more similar will be the color.
function stringToColour(str)
   var hash = 0;
   for (var i = 0; i < str.length; i++)
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
   var colour = '#';
   for (var i = 0; i < 3; i++)
       var value = (hash >> (i * 8)) & 0xFF;
        colour += ('00' + value.toString(16)).substr(-2);
   return colour;

// colorize the labels after tha page has laoded
$( window ).load(function()
  $('.label-autocolor').each(function (index, value)
  var color = stringToColour($(value).text());
   $(value).css('background-color', color);

This works pretty well. Try it out on jsfiddle. Just insert in the upper left box a new label (e.g: <span class="label label-autocolor">Message three</span>) and press the run button. It should appear in a new different colour.

Happy coding !

Get Social

(c) 2023, by bytebang e.U. - Impressum - Datenschutz / Nutzungsbedingungen