tomhodgins/hexshift.html

## hexshift.html
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <link href="http://staticresource.com/formal.css" rel=stylesheet>
  <title>Hex Color Changer</title>
  <style>
    * {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-kerning: auto;
    }
    html {
      text-align: center;
      padding: 30px 15px;
    }
    body {
      background: #07f;
      margin: 0 auto;
      max-width: 500px;
      padding: 2em 3em 3em 3em;
      border-radius: 3px;
    }
    input {
      display: block;
      width: 100% !important;
      margin-top: 1em !important;
      height: 40px;
    }
    @media (min-width: 250px) {
      [type=color] {
        width: calc(100% - 65px) !important;
        float: left;
      }
      [type=number] {
        width: 50px !important;
        margin-left: 15px;
      }
    }
    @media (min-width: 400px) {
      input[type=button] {
        width: calc(50% - 7.5px) !important;
        float: left;
      }
      input[type=button] + input[type=button]{
        margin-left: 15px;
      }
    }
  </style>
</head>
<body>
  <input id=input type=color value=#0077ff onchange=updateBG()>
  <input id=number type=number min=0 max=255 value=10>
  <input type=button value=Lighten onclick=lighten(input.value,number.value)>
  <input type=button value=Darken onclick=darken(input.value,number.value)>
  <input id=output>
  <script>
    var input = document.getElementById('input'),
        number = document.getElementById('number'),
        output = document.getElementById('output')
    function updateBG(){
      document.body.style.background = input.value
    }
    function lighten(hex,step,direction){
      hexShift(hex,step,'up')
    }
    function darken(hex,step,direction){
      hexShift(hex,step,'down')
    }
    function hexShift(hex,step,direction){
      var color = hex.replace(/#/g,'')
      var swatch = ''
      var newColor = ''
      if (color.length == 3) {
        var swatch = ''
        for(i=0;i<color.length;i++){
          swatch += color.substring(i,i+1)+color.substring(i,i+1)
        }
        color = swatch
      }
      for (i=0;i<6;i++){
        var num = parseInt(color.substring(i,i+2),16)
        var oper = direction=='up'?'+':'-'
        var value = eval(num+oper+step)
        if (value > 255) {
          value = 255
        } else if (value < 0) {
          value = 0
        }
        value = value.toString(16)
        value = value.length==1?0+value:value;
        newColor += value
        i++
      }
      newColor = '#'+newColor
      output.value = newColor
      document.documentElement.style.background = newColor
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8>
	<meta name=viewport content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
	<link href="http://staticresource.com/formal.css" rel=stylesheet>
	<title>Hex Color Changer</title>
	<style>
	* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-kerning: auto;
	}
	html {
	text-align: center;
	padding: 30px 15px;
	}
	body {
	background: #07f;
	margin: 0 auto;
	max-width: 500px;
	padding: 2em 3em 3em 3em;
	border-radius: 3px;
	}
	input {
	display: block;
	width: 100% !important;
	margin-top: 1em !important;
	height: 40px;
	}
	@media (min-width: 250px) {
	[type=color] {
	width: calc(100% - 65px) !important;
	float: left;
	}
	[type=number] {
	width: 50px !important;
	margin-left: 15px;
	}
	}
	@media (min-width: 400px) {
	input[type=button] {
	width: calc(50% - 7.5px) !important;
	float: left;
	}
	input[type=button] + input[type=button]{
	margin-left: 15px;
	}
	}
	</style>
	</head>
	<body>
	<input id=input type=color value=#0077ff onchange=updateBG()>
	<input id=number type=number min=0 max=255 value=10>
	<input type=button value=Lighten onclick=lighten(input.value,number.value)>
	<input type=button value=Darken onclick=darken(input.value,number.value)>
	<input id=output>
	<script>
	var input = document.getElementById('input'),
	number = document.getElementById('number'),
	output = document.getElementById('output')
	function updateBG(){
	document.body.style.background = input.value
	}
	function lighten(hex,step,direction){
	hexShift(hex,step,'up')
	}
	function darken(hex,step,direction){
	hexShift(hex,step,'down')
	}
	function hexShift(hex,step,direction){
	var color = hex.replace(/#/g,'')
	var swatch = ''
	var newColor = ''
	if (color.length == 3) {
	var swatch = ''
	for(i=0;i<color.length;i++){
	swatch += color.substring(i,i+1)+color.substring(i,i+1)
	}
	color = swatch
	}
	for (i=0;i<6;i++){
	var num = parseInt(color.substring(i,i+2),16)
	var oper = direction=='up'?'+':'-'
	var value = eval(num+oper+step)
	if (value > 255) {
	value = 255
	} else if (value < 0) {
	value = 0
	}
	value = value.toString(16)
	value = value.length==1?0+value:value;
	newColor += value
	i++
	}
	newColor = '#'+newColor
	output.value = newColor
	document.documentElement.style.background = newColor
	}
	</script>
	</body>
	</html>