A Tiny Color Picker Built on jQuery | MiniColors

MiniColors is a powerful, elegant, animated, and fully customizable jQuery-based color picker for your modern web page/web application.

Main Features:

  • The color picker appears when blurred and clicked.
  • The built-in mode is also supported.
  • Supports Hex and RGB (a) color formats.
  • Configurable open / close animation.
  • Allocated parking.
  • Custom control types.
  • Easy to design with your own CSS.
  • API methods and event handlers.Install it with NPM:

How to make use of it:

1. Add jQuery JavaScript library and the jQuery MiniColors plugin’s information to the online web page.

<!-- jQuery -->
<script src="//code.jquery.com/jquery.min.js"></script>
<!-- MiniColors -->
<script src="jquery.minicolors.js"></script>
<link rel="stylesheet" href="jquery.minicolors.css">

2. Attach the color picker (with default settings) to an input field.

<input type="text" id="demo" class="demo" value="#ff6161">

3. All possible choices to customize the color picker.

$('.demo').minicolors({

  // animation speed
  animationSpeed: 50,

  // easing function
  animationEasing: 'swing',

  // defers the change event from firing while the user makes a selection
  changeDelay: 0,

  // hue, brightness, saturation, or wheel
  control: 'hue',

  // default color
  defaultValue: '',

  // hex or rgb
  format: 'hex',

  // show/hide speed
  showSpeed: 100,
  hideSpeed: 100,

  // is inline mode?
  inline: false,

  // a comma-separated list of keywords that the control should accept (e.g. inherit, transparent, initial). 
  keywords: '',

  // uppercase or lowercase
  letterCase: 'lowercase',

  // enables opacity slider
  opacity: false,

  // custom position
  position: 'bottom left',
  
  // additional theme class
  theme: 'default',

  // an array of colors that will show up under the main color
  swatches: []
  
});

4. Event handlers.

$('.demo').minicolors({

  // Fires when the value of the color picker changes
  change: null,

  // Fires when the color picker is hidden.
  hide: null,

  // Fires when the color picker is shown. 
  show: null

});

5. You also can move the choices to the color picker through data-OPTION attributes:

<input type="text" 
       id="inline" 
       class="demo" 
       data-inline="true" 
       value="#4fc8db"
>

Powerful Color Picker Plugin, jQuery MiniColorsGithub


See Demo And Download

Official Website(claviska): Click Here

This superior jQuery/javascript plugin is developed by claviska. For extra Advanced Usage, please go to the official website.

Share