HTML

HTML - Color Selector

Click on any color in the the spectrum to display it’s HTML hex color code in a swatch and the HSL Color Picker underneath.

#colortable {min-width:460px;} #colortable td {height:20px;} #selectedcolors {list-style-type:none;margin-left:0;} #selectedcolors li {float:left;display:inline;width:60px;margin-right:5px;font-size:80%;} #selectedcolors span {display:block;width:60px;height:40px;}

HSL Color Picker

Saturation:

Luminance:

Hexadecimal:

RGB:

HSL:

Resources

var $j = jQuery.noConflict(); $j(function () { $j(‘#colortable’).on(‘click’, ‘td’, function() { var color = $j(this).attr(‘bgcolor’); $j(“#selectedcolors”).append(’

  • ’ + color + ‘
  • ’); $j(“#hex-output”).focus().val(color).change(); //set hsl picker }); });

    comments powered by Disqus