Gray Color Picker

by Travis Almand

HTML

<h1>Color Picker</h1>
<p>Choose your color from this handy-dandy color picker!</p>

<div class="picker">
  <strong>Red</strong>
  <select id="red">
    <option value="0">0</option>
  </select>
</div>
<div class="picker">
  <strong>Blue</strong>
  <select id="blue">
    <option value="0">0</option>
  </select>
</div>
<div class="picker">
  <strong>Green</strong>
  <select id="green">
    <option value="0">0</option>
  </select>
</div>
<div class="picker">
  <strong>Gray</strong>
  <select id="alpha">
    <option value="0.0">No Gray</option>
    <option value="0.1">Some grey</option>
    <option value="0.2">A little bit more</option>
    <option value="0.3">Halfway to halfway</option>
    <option value="0.4">Not quite halfway</option>
    <option value="0.5">Half black or half white?</option>
    <option value="0.6">Halfway plus 10%</option>
    <option value="0.7">Getting dark out here</option>
    <option value="0.8">85% - 5</option>
    <option value="0.9">Almost there</option>
    <option value="1.0">Not gray again</option>
  </select>
 </div>
<div id="chosen_color"><span></span></div>
<p class="please-note">Please note: some color choices are restricted for your own safety. We apologize for any inconvenience saving your life may entail.</p>

CSS

#chosen_color {
  background-color: white;
  border: 3px solid rebeccapurple;
  border-radius: 7px;
  float: left;
  height: 30px;
  margin: 0 20px;
  position: relative;
  width: 30px;
}
#chosen_color span {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.5s;
}

.picker {
  float: left;
  margin: 0 10px 10px;
  text-align: center;
}
.picker strong,
.picker select{
  display: block;
}

.please-note {
  clear: left;
}

JavaScript

var $red = document.querySelector('#red');
var $blue = document.querySelector('#blue');
var $green = document.querySelector('#green');
var $alpha = document.querySelector('#alpha');
var $theChosenOne = document.querySelector('#chosen_color span');

$alpha.addEventListener('change', function () {
	$theChosenOne.style.backgroundColor = 'rgba(' + $red.value + ',' + $blue.value + ',' + $green.value + ',' + $alpha.value + ')';
});