Chameleon.js

A jQuery plugin for automatic content colorization.

Features

1. Colorize the content with image;
2. Get colors from an image;
3. Sort colors by various parameters (hue, saturation, value, chroma, alpha);
4. Some color manipulations (format, luminance, transparency, readable);
5. Wrap the color in the jQuery element.

Install

Download directly from GitHub or install via npm/Bower.

Include jQuery and the plugin:

<script src="path/to/jquery.js"></script> <script src="path/to/jquery.chameleon.js"></script>

Or add Chameleon.js to jQuery:

import $ from 'jquery'; import addChameleonJsToJquery from 'jquery.chameleon.js/addChameleonJsToJquery';  addChameleonJsToJquery($);

Debug

If you need debug, include it:

<script src="path/to/chameleonDebug.js"></script>

With addChameleonJsToJquery($) debug included automatically.

Enable debug:

$(document).ready(function() {     $('.chmln').chameleon({         debug: true     }); });

Modes

If you need colorization modes, include it:

<script src="path/to/colorization/mode.js"></script>

With addChameleonJsToJquery($) modes included automatically.

Use modes:

$(document).ready(function() {     $('.chmln').chameleon({         colorize_mode: {             name: "blur",             config: {}           }     }); });

Styles

If you need styles for color elements, include it:

<link rel="stylesheet" href="path/to/chmln__colors.css">

Or import:

import 'jquery.chameleon.js/css/chmln__colors.css';

Use

Run the plugin:

$(document).ready(function() {     $('.chmln').chameleon(); });

For more information and examples check the demo page.