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.