Auto Colorize Elements Based On Their Values - jQuery ColorizeJS

Elements colorization is a common task. People visually handle data much better when colors are applied to them.

colorize.js is a simple jQuery automatic content colorization plugin designed to colorize elements depending on whether their value matches a given range.

This can be extremely useful when you want to emphasize content to your visitors but don't have time/resources for graphics.

See Also:

• Colorize Numeric Values In Table Columns - Column HeatMap
• jQuery Plugin For Colorize Content Based On Image - Chameleon.js

How to use it:

1. Download and load the colorizejs.js plugin after the latest jQuery library (slim build is recommended).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/src/colorizejs.js"></script>

2. Colorize the content based on its value. Red, for example, means that the value is below the average. Green, on the other hand, stands for above average, and blue is left for colors that are pretty much average.

<span id="example">
  200
</span>

$(function(){
  $('#example').colorizejs({

    // larger than 80
    80: 'green',

    // larger than 50
    50: 'blue', 

    // larger than 0
    0: 'red',
    
  });
});

3. You can also apply CSS classes to the element based on its value.

$(function(){
  $('#example').colorizejs({

    // larger than 80
    80: '.green',

    // larger than 50
    50: '.blue', 

    // larger than 0
    0: '.red',
    
  });
});

---

This awesome jQuery plugin is developed by yegor256. For more Advanced Usages, please check the demo page or visit the official website.