Control Types

Input Modes


Valid positions include bottom left, bottom right, top left, and top right.


RGB input can be assigned by setting the format option to rgb.
RGBA input can be assigned by setting the format option to rgb and opacity option to true.

Different Styles

Opacity can be assigned by including the data-opacity attribute or by setting the opacity option to true.
CSS-wide keywords can be assigned by setting the keywords option to a comma-separated list of valid keywords: transparent, initial, inherit.
This field has a default value assigned to it, so it will never be empty.
This field will always be uppercase.
Example using Bootstrap's input groups.
Input group example with addon.
Example with swatches.
Example with swatches and opacity.
All Rights Reserved by Xtreme admin. Designed and Developed by WrapPixel.
$('.demo').each(function () { // // Dear reader, it's actually very easy to initialize MiniColors. For example: // // $(selector).minicolors(); // // The way I've done it below is just for the demo, so don't get confused // by it. Also, data- attributes aren't supported at this time...they're // only used for this demo. // $(this).minicolors({ control: $(this).attr('data-control') || 'hue', defaultValue: $(this).attr('data-defaultValue') || '', format: $(this).attr('data-format') || 'hex', keywords: $(this).attr('data-keywords') || '', inline: $(this).attr('data-inline') === 'true', letterCase: $(this).attr('data-letterCase') || 'lowercase', opacity: $(this).attr('data-opacity'), position: $(this).attr('data-position') || 'bottom left', swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [], change: function (value, opacity) { if (!value) return; if (opacity) value += ', ' + opacity; if (typeof console === 'object') { console.log(value); } }, theme: 'bootstrap', }); });