<input type="color" id="myColorPicker">
<div id="colorDisplay"></div>

<style>
  input[type=color] {
    width: 150px;
    height: 50px;
    border-radius: 3px;
    border-color: white;
    border: solid;
    outline: none;
  }
  
  #colorDisplay {
    color: white;
    font-size: 20px;
    font-family: Times;
    text-align: left;
  }
  
  #colorDisplay::-moz-color-swatch-text {
    color: White;
    font-size: 20px;
    font-family: Times;
    text-align: left;
  }
  
</style>

<script>
  var colorPicker = document.getElementById("myColorPicker");
  var colorDisplay = document.getElementById("colorDisplay");

  colorPicker.addEventListener("input", function() {
    colorDisplay.innerText = colorPicker.value;
  });
</script>