#2 CSS hue/sat box

multiple css gradients backgrounds

by toubia95

HTML

<input id="hue-sat-box" type="image" alt=""/>
<div id="selected-color"></div><br>
<table id="table">
    <tr><td style="background-color:hsl(0,0%,100%)"></td>
        <td style="background-color:hsl(0,100%,88%)"></td>
        <td style="background-color:hsl(0,100%,75%)"></td>
        <td style="background-color:hsl(0,100%,62%)"></td>
        <td style="background-color:hsl(0,100%,50%)"></td></tr>
    <tr><td style="background-color:hsl(0,0%,75%)"></td>
        <td style="background-color:hsl(0,0%,100%)"></td>
        <td style="background-color:hsl(0,0%,100%)"></td>
        <td style="background-color:hsl(0,0%,100%)"></td>
        <td style="background-color:hsl(0,100%,38%)"></td></tr>
    <tr><td style="background-color:hsl(0,0%,50%)"></td>
        <td style="background-color:hsl(0,0%,100%)"></td>
        <td style="background-color:hsl(0,0%,100%)"></td>
        <td style="background-color:hsl(0,0%,100%)"></td>
        <td style="background-color:hsl(0,100%,25%)"></td></tr>
    <tr><td style="background-color:hsl(0,0%,25%)"></td>
        <td style="background-color:hsl(0,0%,100%)"></td>
        <td style="background-color:hsl(0,0%,100%)"></td>
        <td style="background-color:hsl(0,0%,100%)"></td>
        <td style="background-color:hsl(0,100%,12%)"></td></tr>
    <tr><td style="background-color:hsl(0,0%,0%)"></td>
        <td style="background-color:hsl(0,25%,0%)"></td>
        <td style="background-color:hsl(0,50%,0%)"></td>
        <td style="background-color:hsl(0,75%,0%)"></td>
        <td style="background-color:hsl(0,100%,0%)"></td></tr>
<table>

CSS

#hue-sat-box {
    position: relative;
    display: block;
    width: 200px;
    height: 200px;
    background: -moz-linear-gradient(bottom, hsla(0,0%,0%,1), hsla(0,50%,50%,0)), -moz-linear-gradient(left, hsla(0,100%,100%,1), hsla(0,100%,50%,1));
}

#selected-color {
    display:block;
    width: 198px;
    height: 28px;
    margin-top: 5px;
    border: 1px solid #666;
}

table {
    border-spacing: 0px;
    border-collapse: collapse; 
}
table tr td {
    width: 10px;
    height: 10px;
}

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 = x/2;
  var y = e.pageY - this.offsetTop;
  var y = 50-(y/4);
  //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);
});