https://github.com/bhoodream/chameleon.js
A jQuery plugin for automatic content colorization.
https://github.com/bhoodream/chameleon.js
chameleon colors images javascript jquery jquery-plugin
Last synced: about 2 months ago
JSON representation
A jQuery plugin for automatic content colorization.
- Host: GitHub
- URL: https://github.com/bhoodream/chameleon.js
- Owner: bhoodream
- Created: 2013-05-05T11:04:19.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2018-08-19T11:07:03.000Z (over 7 years ago)
- Last Synced: 2025-10-11T07:27:43.630Z (2 months ago)
- Topics: chameleon, colors, images, javascript, jquery, jquery-plugin
- Language: JavaScript
- Homepage: https://vadimfedorov.ru/lab/chameleon-js/jquery
- Size: 222 KB
- Stars: 59
- Watchers: 2
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://github.com/bhoodream/Chameleon.js) or install via [npm](https://www.npmjs.com/package/jquery.chameleon.js)/[Bower](http://bower.io/search/?q=jquery.chameleon.js).
Include jQuery and the plugin:
```html
```
Or add Chameleon.js to jQuery:
```javascript
import $ from 'jquery';
import addChameleonJsToJquery from 'jquery.chameleon.js/addChameleonJsToJquery';
addChameleonJsToJquery($);
```
## Debug
If you need debug, include it:
```html
```
With `addChameleonJsToJquery($)` debug included automatically.
Enable debug:
```javascript
$(document).ready(function() {
$('.chmln').chameleon({
debug: true
});
});
```
## Modes
If you need colorization modes, include it:
```html
```
With `addChameleonJsToJquery($)` modes included automatically.
Use modes:
```javascript
$(document).ready(function() {
$('.chmln').chameleon({
colorize_mode: {
name: "blur",
config: {}
}
});
});
```
## Styles
If you need styles for color elements, include it:
```html
```
Or import:
```javascript
import 'jquery.chameleon.js/css/chmln__colors.css';
```
## Use
Run the plugin:
```javascript
$(document).ready(function() {
$('.chmln').chameleon();
});
```
For more information and examples check the [demo page](https://vadimfedorov.ru/lab/chameleon-js/jquery).