<!doctype html> <html> <head> <title>jQuery MiniColors</title> <meta charset="utf-8"> <!-- jQuery --> <script src="jquery.min.js"></script> <!-- MiniColors --> <script src="jquery.minicolors.js"></script> <link rel="stylesheet" href="jquery.minicolors.css"> <style> body { font: 16px sans-serif; line-height: 1.8; padding: 0 40px; margin-bottom: 200px; } a { color: #08c; text-decoration: none; } a:hover { text-decoration: underline; } .form-group { margin: 20px 0; } label { color: #888; } </style> <script> $(document).ready( function() { $('.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. Again, // they're only used for the purposes of this demo. // $(this).minicolors({ control: $(this).attr('data-control') || 'hue', defaultValue: $(this).attr('data-defaultValue') || '', inline: $(this).attr('data-inline') === 'true', letterCase: $(this).attr('data-letterCase') || 'lowercase', opacity: $(this).attr('data-opacity'), position: $(this).attr('data-position') || 'bottom left', change: function(hex, opacity) { var log; try { log = hex ? hex : 'transparent'; if( opacity ) log += ', ' + opacity; console.log(log); } catch(e) {} }, theme: 'default' }); }); }); </script> </head> <body> <div class="form-group"> <input type="text" id="text-field" class="demo" value="#70c24a"> </div> </body> </html>