Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>After doing some search at comes with nothing I after almost 1 years from your question I think that there is no option but manually coding it.</p> <p>I come with this solution after hacking a little bit <a href="http://acko.net/dev/farbtastic" rel="nofollow">farbtastic</a> and <a href="http://www.eyecon.ro/colorpicker/" rel="nofollow">colorpicker</a> jquery plugins:</p> <pre><code>/* * ColorPicker. */ // Utility functions. function convertHexToRGB(hex) { var hex = parseInt(((hex.indexOf('#') &gt; -1) ? hex.substring(1) : hex), 16); return [hex &gt;&gt; 16,(hex &amp; 0x00FF00) &gt;&gt; 8,(hex &amp; 0x0000FF)]; } function convert_RGB_to_HSL(rgb) { var min, max, delta, h, s, l; var r = rgb[0], g = rgb[1], b = rgb[2]; min = Math.min(r, Math.min(g, b)); max = Math.max(r, Math.max(g, b)); delta = max - min; l = (min + max) / 2; s = 0; if (l &gt; 0 &amp;&amp; l &lt; 1) { s = delta / (l &lt; 0.5 ? (2 * l) : (2 - 2 * l)); } h = 0; if (delta &gt; 0) { if (max == r &amp;&amp; max != g) h += (g - b) / delta; if (max == g &amp;&amp; max != b) h += (2 + (b - r) / delta); if (max == b &amp;&amp; max != r) h += (4 + (r - g) / delta); h /= 6; } return [h, s, l]; } $('#footer-text-color-selector').hide(); $.farbtastic('#footer-text-color-selector') .setColor('#21759B') .linkTo(function(color){ $('#footer-text-color').css({ 'backgroundColor':color, 'color': (convert_RGB_to_HSL(convertHexToRGB(color))[2] &gt; 125) ? '#000' : '#FFF' }); $('#footer-preview a').css('color', color); // XXX Any other things-to-do when the input change. }); // Hide &amp; Show behaviour. $('#footer-text-color').click(function() { $('#footer-text-color-selector').fadeIn(); }); $(document).mousedown(function() { $('#footer-text-color-selector').each(function() { var display = $(this).css('display'); if ( display == 'block' ) $(this).fadeOut(); }); }); // Initial behaviour. $('#footer-text-color').css({ 'backgroundColor': $('#footer-text-color').val(), 'color': (convert_RGB_to_HSL(convertHexToRGB($('#footer-text-color').val()))[2] &gt; 125) ? '#000' : '#FFF' }); $('#footer-preview a').css('color', $('#footer-text-color').val()); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload