Simple jQuery Based Color and Gradient Picker - asColorPicker

asColorPicker is a modular jQuery plugin that appends a fully customizable RGB/HEX color picker to your input field. With support for CSS linear gradients.

See Also:

• Online CSS Gradient Generator

Basic Usage:

1. Load jQuery JavaScript library and the jQuery asColorPicker plugin's files in your web page.

<link rel="stylesheet" href="css/asColorPicker.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="libs/jquery-asColorPicker.min.js"></script>

2. Create a normal Html input and use the value attribute to specify the initial color code.

<input type="text" class="demo" value="#000"> 

3. Call the plugin to generate a basic color picker for the input field.

$(document).ready(function() {
  $(".demo").asColorPicker();
});

4. Available settings to customize your color picker.

// read only mode
readonly: false,

// skin
skin: null,

// hide input field
hideInput: false,
hideFireChange: true,

// keyboard support
keyboard: false,

// i18n
lang: 'en',

// color options
color: {
    format: false,
    alphaConvert: { // or false will disable convert
      'RGB': 'RGBA',
      'HSL': 'HSLA',
      'HEX': 'RGBA',
      'NAME': 'RGBA',
    },
    shortenHex: false,
    hexUseName: false,
    reduceAlpha: true,
    nameDegradation: 'HEX',
    invalidValue: '',
    zeroAlphaAsTransparent: true
},

// simple, palettes, complex or gradient
mode: 'simple',

// callbacks
onInit: null,
onReady: null,
onChange: null,
onClose: null,
onOpen: null,
onApply: null

Change log:

2017-09-12

• v0.4.3: ES5-->ES6

2016-10-17

• v0.4.3: ES5-->ES6

---

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