<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>jQuery Colorpicker</title> <!-- jQuery/jQueryUI (hosted) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/> <style> body { font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; } </style> <script src="jquery.colorpicker.js"></script> <link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/> <script src="i18n/jquery.ui.colorpicker-nl.js"></script> </head> <body> <h1>jQuery ColorPicker</h1> <hr/> Basic <input> example, without any options: <input type="text" class="cp-basic" value="fe9810"/> <hr/> Basic <div> example, without any options: <span class="cp-basic" style="display: inline-block; vertical-align: top;"></span> <script> $( function() { $('.cp-basic').colorpicker(); }); </script> <hr/> Fully-featured example: <input type="text" class="cp-full" value="186aa7"/> <script> $( function() { $('.cp-full').colorpicker({ parts: 'full', showOn: 'both', buttonColorize: true, showNoneButton: true, alpha: true }); }); </script> <hr/> Localized to Dutch (nl): <input type="text" class="cp-nl" value="ccea73"/> <script> $( function() { $('.cp-nl').colorpicker({ regional: 'nl', showNoneButton: true, alpha: true }); }); </script> <hr/> Limit to websafe colors: <input type="text" class="cp-websafe" value="0fa7c2"/> <script> $( function() { $('.cp-websafe').colorpicker({ limit: 'websafe' }); }); </script> <hr/> Alternative field class: <input type="text" class="cp-alt" value="b762ae"/> <span class="cp-alt-target" style="display: inline-block; border: thin solid black; padding: .5em 4em;"> <div style=" background-color: white; border: thin solid black; padding: .25em 2em; font-size: 1.25em; font-weight: bold;">Background-color on outside, text color here</div> </span> <script> $( function() { $('.cp-alt').colorpicker({ altField: '.cp-alt-target', altProperties: 'background-color,color', altAlpha: true, alpha: true }); }); </script> <hr/> Events: <input type="text" class="cp-events" value="92b64a"/> <div class="cp-events-log" style="vertical-align: top; display: inline-block; border: thin solid black; height: 10em; overflow-y: scroll; width: 50em;"></div> <script> $( function() { var count = 0; function addToEventLog(label, message) { var line = '<div>#'+(++count)+' '+label+': '+message+'</div>'; var log = $('.cp-events-log'); log.append(line).scrollTop(log[0].scrollHeight); } $('.cp-events').colorpicker({ init: function(event, color) { addToEventLog('Init', color.formatted); }, select: function(event, color) { addToEventLog('Select', color.formatted); }, close: function(event, color) { addToEventLog('Close', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a); } }); }); </script> <hr/> Output formatting HSLA: <input type="text" class="cp-format" value="918237"/> <span class="cp-format-output"></span> <script> $( function() { $('.cp-format').colorpicker({ colorFormat: 'HSLA', alpha: true, init: function(event, color) { $('.cp-format-output').text(color.formatted); }, select: function(event, color) { $('.cp-format-output').text(color.formatted); } }); }); </script> <hr/> Output format list: <input type="text" class="cp-name" value="a92fb4"/> <span class="cp-name-output"></span> <script> $( function() { $('.cp-name').colorpicker({ parts: 'full', colorFormat: ['NAME', 'EXACT', '#HEX3', 'RGB', 'RGBA'], init: function(event, color) { $('.cp-name-output').text(color.formatted); }, select: function(event, color) { $('.cp-name-output').text(color.formatted); } }); }); </script> <hr/> Dialog with Colorpicker popup (demonstrates z-index): <button id="cp-dialog-open">Open dialog</button> <div id="cp-dialog-modal" title="Basic modal dialog"> Basic <input> example, without any options: <input type="text" class="cp-basic" value="fe9810"/> <br/> Basic <div> example, without any options: <span class="cp-basic" style="display: inline-block; vertical-align: top;"></span> </div> <script> $(function() { var dialog = $('#cp-dialog-modal').dialog({ autoOpen: false, minWidth: 500, modal: true, buttons: { 'Close': function() { $(this).dialog('close'); } } }); $('#cp-dialog-open').click(function() { dialog.dialog('open'); }); }); </script> <hr/> Modal (and showCancelButton, closeOnEscape, showCloseButton): <input type="text" class="cp-modal" value="9ba73f"/> <script> $( function() { $('.cp-modal').colorpicker({ parts: 'draggable', showCloseButton: false, modal: true, showCancelButton: false, closeOnEscape: false }); }); </script> <hr/> Input formatting: <input type="text" class="cp-input" value="rgb(123,42,87)"/> <script> $( function() { $('.cp-input').colorpicker({ colorFormat: ['RGBA'] }); }); </script> </body> </html>