Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html lang="en">
<head>
<title>JQuery HSLA Color Picker</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
  <p class="head"></p>
  
  <section class="cpick">
    <input class="colorwheel cpick-hue" type="range" value="328" min="0" max="360" value="328"> <input class="cpick-hue-text" type="text" placeholder="H"><br>
    <input class="cpick-s" type="range" min="0" max="100" value="100"> <input class="cpick-s-text" type="text" value="100%" placeholder="S"><br>
    <input class="cpick-l" type="range" min="0" max="100" value="44"> <input class="cpick-l-text" type="text" value="44%" placeholder="L"><br>
    <input class="cpick-a" type="range" step=".01" min="0" max="1" value="1"> <input class="cpick-a-text" type="text" placeholder="A">
    
    <p>
      <input class="cpick-code-hsl" type="text" placeholder="HSL">
      <input class="cpick-code-rgb" type="text" placeholder="RGB">
    </p>
  </section>
</body>
</html>
​
 
*, *:active, *:focus { outline:none; }
  input[type=range] { padding:0; margin:0; }
  
.colorwheel {
  background: -moz-linear-gradient(left,  #ff0000 0%, #ffff00 18%, #00ff00 35%, #00ffff 50%, #0000ff 65%, #ff00ff 82%, #ff0004 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(18%,#ffff00), color-stop(35%,#00ff00), color-stop(50%,#00ffff), color-stop(65%,#0000ff), color-stop(82%,#ff00ff), color-stop(100%,#ff0004)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #ff0000 0%,#ffff00 18%,#00ff00 35%,#00ffff 50%,#0000ff 65%,#ff00ff 82%,#ff0004 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #ff0000 0%,#ffff00 18%,#00ff00 35%,#00ffff 50%,#0000ff 65%,#ff00ff 82%,#ff0004 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #ff0000 0%,#ffff00 18%,#00ff00 35%,#00ffff 50%,#0000ff 65%,#ff00ff 82%,#ff0004 100%); /* IE10+ */
  background: linear-gradient(to right,  #ff0000 0%,#ffff00 18%,#00ff00 35%,#00ffff 50%,#0000ff 65%,#ff00ff 82%,#ff0004 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ff0004',GradientType=1 ); /* IE6-9 */
}
​
.cpick input[type=range] { width:50%; }
​
.cpick-s, .cpick-l, .cpick-a {
  background:transparent;
}
​
.head {
  width: 100%;
  height: 200px;
  margin-bottom: 5px;
}
 
$(document).ready(function() {
  // Setup Hue
  $(".cpick-hue-text").val( $(".cpick-hue").val() );
  $(".cpick-hue").on('change', function() {
    $(".cpick-hue-text").val( $(this).val() );
    $(".cpick-code-hsl").trigger('change');
  });
  $(".cpick-hue-text").on('keyup change', function() {
    $(".cpick-hue").val( $(this).val() );
  });
  // Setup Saturation
  $(".cpick-s-text").val( $(".cpick-s").val() + "%" );
  $(".cpick-s").on('change', function() {
    $(".cpick-s-text").val( $(this).val() + "%" );
    $(".cpick-code-hsl").trigger('change');
  });
  $(".cpick-s-text").on('keyup change', function() {
    $(".cpick-s").val( $(this).val() );
  });
  // Setup Lightness
  $(".cpick-l-text").val( $(".cpick-l").val() + "%" );
  $(".cpick-l").on('change', function() {
    $(".cpick-l-text").val( $(this).val() + "%" );
    $(".cpick-code-hsl").trigger('change');
  });
  $(".cpick-l-text").on('keyup change', function() {
    $(".cpick-l").val( $(this).val() );
  });
  // Setup Alpha
  $(".cpick-a-text").val( $(".cpick-a").val() );
  $(".cpick-a").on('change', function() {
    $(".cpick-a-text").val( $(this).val() );
    $(".cpick-code-hsl").trigger('change');
  });
  // Alpha Saturation
  $(".cpick-s").css({
    "background": "linear-gradient(to right, #7f7f80 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%)" + " 100%)"
  });
  // Alpha Lightness
  $(".cpick-l").css({
    "background": "linear-gradient(to right, #000000 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%) 50%,#ffffff 100%)"
  });
  // Alpha Preview
  $(".cpick-a").css({
    "background": "linear-gradient(to right, rgba(51,51,51,0) 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%)" + " 100%)"
  });
  $(".cpick-a-text").on('keyup change', function() {
    $(".cpick-a").val( $(this).val() );
  });
  // Trigger code update on textbox's
  $(".cpick").children("input").on('keyup change', function() {
    $(".cpick-code-hsl").trigger('change');
  });
  // Setup Code
  $(".cpick-code-hsl").on('change keyup', function() {
    $(this).val( "hsla(" + $(".cpick-hue-text").val() + ", " + $(".cpick-s-text").val() + ", " + $(".cpick-l-text").val() + ", " + $(".cpick-a-text").val() + ")");
    
    // Apply as body background
    $(".head").css({
      "background": $(".cpick-code-hsl").val()
    });
    
    $(".cpick-code-rgb").val( $(".head").css("backgroundColor") );
    
    // Alpha Saturation
    $(".cpick-s").css({
      "background": "linear-gradient(to right, #7f7f80 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%)" + " 100%)"
    });
    // Alpha Lightness
    $(".cpick-l").css({
      "background": "linear-gradient(to right, #000000 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%) 50%,#ffffff 100%)"
    });
    // Alpha Preview
    $(".cpick-a").css({
      "background": "linear-gradient(to right, rgba(51,51,51,0) 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%)" + " 100%)"
    });
  });
  
  $(".head").css({
    "background": $(".cpick-code-hsl").val()
  });
  
  $(".cpick-code-hsl").trigger('change');
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers