CSS hue/sat box

by toubia95

HTML

<input id="hue-sat-box" type="image" alt=""/>
<div id="selected-color"></div>

CSS

#hue-sat-box {
    position: relative;
    display: block;
    width: 200px;
    height: 200px;
    background-image: -moz-linear-gradient(left, hsla(0,100%,100%,1), hsla(0,100%,50%,1));
}
#hue-sat-box:before {
    display: block;
    content:"";
    width: 200px;
    height: 200px;
    background-image: -moz-linear-gradient(bottom, hsla(0,0%,0%,1), hsla(0,50%,50%,0));
    position: absolute;
}
#selected-color {
    display:block;
    width: 198px;
    height: 28px;
    margin-top: 5px;
    border: 1px solid #666;
}

JavaScript

$('#hue-sat-box').click(function(e){

  //Grab click position, mis the offset of the image to get the position inside
  var x = e.pageX - this.offsetLeft;
  var x = 100-(x/4);
  var y = e.pageY - this.offsetTop;
  var y = 100-(y/2);
  //alert('X: ' + x + ', Y: ' + y);
  $('#selected-color').css('background-color','hsl(0,'+x+'%,'+y+'%');
    $('#selected-color').html('hsl(0,'+x+'%,'+y+'%)');

  //set 2 form field inputs if you want to store/post these values
  //e.g. $("#usa_map_x").val(x); $("#usa_map_y").val(y);
});