Color Picker

  1. Home
  2. Forms
  3. Color Picker
Simple color picker

Most simple example, with any options or color information.

<input type="text" class="form-control" id="mycp" /> <script> $(function () { $('#mycp').colorpicker(); }); </script>
Automatic format detection

Whenever the format option is false (default), the first parsed color format will be detected and used as default, but when the option equals null or empty string, the format is recalculated every time.

<div id="cp5" class="input-group colorpicker-component" title="Using format option"> <input type="text" class="form-control input-lg" value="#305AA2" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function () { $('#cp5').colorpicker({ format: null }); }); </script>
Setting the initial color

The initial color can be specified in 3 ways: input value, data-color attribute and programmatically with the color constructor option. The used initial color has this precedence order when present and not empty: color option, input value, input data-color attribute, colopicker element data-color attribute.

<div id="cp2" class="input-group colorpicker-component" title="Using input value"> <input type="text" class="form-control input-lg" value="#DD0F20" /> <span class="input-group-addon"><i></i></span> </div> <div class="mb-3"></div> <div id="cp3a" class="input-group colorpicker-component" data-color="#F18A31" title="Using data-color attribute in the colorpicker element"> <input type="text" class="form-control input-lg" /> <span class="input-group-addon"><i></i></span> </div> <div class="mb-3"></div> <div id="cp3b" class="input-group colorpicker-component" title="Using data-color attribute in the input"> <input type="text" class="form-control input-lg" data-color="#F8EB48" /> <span class="input-group-addon"><i></i></span> </div> <div class="mb-3"></div> <div id="cp4" class="input-group colorpicker-component" title="Using color option"> <input type="text" class="form-control input-lg" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function () { $('#cp2, #cp3a, #cp3b').colorpicker(); $('#cp4').colorpicker({"color": "#16813D"}); }); </script>
Force a format

If defined, the format option forces an specific format, ignoring the original one.

<div id="cp5b" class="input-group colorpicker-component" title="Using format option"> <input type="text" class="form-control input-lg" value="#305AA2" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function () { $('#cp5b').colorpicker({ format: "rgba" }); }); </script>