Contents

• Download
• Demos
• API
  • Instantiation
  • Settings
  • Methods
  • Events
• License

Download

This project is on GitHub. Feel free to post bug reports, feature requests, and code improvements on the official project page.

Download on GitHub

Demos

This is the main demo page, which uses Bootstrap 3, but this plugin works without Bootstrap as well.

View Demo Without Bootstrap

Toggle LTR/RTL

Control Types

Input Modes

Positions

RGB(A)

…and more!

API

Instantiation

Instantiate like any other jQuery plugin:

$('INPUT.minicolors').minicolors(settings);

Settings

Default settings are as follows:

$.minicolors = {
  defaults: {
    animationSpeed: 50,
    animationEasing: 'swing',
    change: null,
    changeDelay: 0,
    control: 'hue',
    defaultValue: '',
    format: 'hex',
    hide: null,
    hideSpeed: 100,
    inline: false,
    keywords: '',
    letterCase: 'lowercase',
    opacity: false,
    position: 'bottom left',
    show: null,
    showSpeed: 100,
    theme: 'default',
    swatches: []
  }
};

For convenience, you can change default settings globally by assigning new values:

$.minicolors.defaults.changeDelay = 200;

To change multiple properties at once, use $.extend():

$.minicolors.defaults = $.extend($.minicolors.defaults, {
  changeDelay: 200,
  letterCase: 'uppercase',
  theme: 'bootstrap'
});

Note: Changing default settings will not affect controls that are already initialized.

animationSpeed

The animation speed of the sliders when the user taps or clicks a new color. Set to 0 for no animation.

animationEasing

The easing to use when animating the sliders.

changeDelay

The time, in milliseconds, to defer the change event from firing while the user makes a selection. This is useful for preventing the change event from firing frequently as the user drags the color picker around.

The default value is 0 (no delay). If your change callback features something resource-intensive (such as an AJAX request), you’ll probably want to set this to at least 200.

control

Determines the type of control. Valid options are hue, brightness, saturation, and wheel.

defaultValue

To force a default color, set this to a valid hex string. When the user clears the control, it will revert to this color.

format

The format miniColors should use. Valid options are hex and rgb.

hideSpeed & showSpeed

The speed at which to hide and show the color picker.

inline

Set to true to force the color picker to appear inline.

keywords

A comma-separated list of keywords that the control should accept (e.g. inherit, transparent, initial). By default, no keywords are allowed.

letterCase

Determines the letter case of the hex code value. Valid options are uppercase or lowercase.

opacity

Set to true to enable the opacity slider. (Use the input element's data-opacity attribute to set a preset value.)

position

Sets the position of the dropdown. Valid options are bottom left, bottom right, top left, and top right.

The swatchPosition setting has been removed in version 2.1. The position of the swatch is now determined by position.

theme

A string containing the name of the custom theme to be applied. In your CSS, prefix your selectors like this:

.minicolors-theme-yourThemeName { ... }

If you are using the default theme, you will probably need to adjust the swatch styles depending on your existing stylesheet rules. Version 2.1 removes as much styling on the input element as possible, which means it’s up to you to adjust your CSS to make sure the swatch aligns properly.

To adjust the swatch, override these styles:

.minicolors-theme-default .minicolors-swatch {
  top: 5px;
  left: 5px;
  width: 18px;
  height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
  left: auto;
  right: 5px;
}