Skip to content

Instantly share code, notes, and snippets.

@tmrDevelops

tmrDevelops/ColorBits.markdown

Created August 16, 2015 07:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tmrDevelops/b570adb89dd0965f3a7c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tmrDevelops/b570adb89dd0965f3a7c to your computer and use it in GitHub Desktop.
Download ZIP
ColorBits
Raw
ColorBits.markdown
Raw
index.html
<h4>Hexadecimal Color <br>To 16-Bit Integer<br> To RGB Values<br> Using Bitwise Shifting </h4>
<form>
<div>
<input type="text" value="E9848C" id="hex" name="hex" />
<input type="button" value="Do It" onclick="colorBit();" />
</div>
</form>
<div id='res'></div>
Raw
script.js
var $ = function(id) {
return document.getElementById(id);
};
var colorBit = function() {
var hex = $('hex').value;
var _16int = parseInt(hex, 16);
var r = (_16int >> 16) & 0xFF;
var g = (_16int >> 8) & 0xFF;
var b = _16int & 0xFF;
$('res').style.color = '#' + hex;
$('res').innerHTML =
'Hex: ' + '#' + hex +
'<br>16-Bit Int: ' + _16int +
'<br>Red (R): ' + r +
'<br>Green (G): ' + g +
'<br>Blue (B): ' + b;
}
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Electrolize);
body {
background: hsla(0, 0%, 10%, 1);
margin: 5%;
overflow: hidden;
color: hsla(255, 255%, 255%, 1);
letter-spacing: 3px;
font-size: 2em;
line-height: 1.5em;
font-family: 'Electrolize', sans-serif;
}
#res {
padding-top: 1em;
background: hsla(0, 0%, 20%, .1);
}
input {
color: hsla(0, 0%, 0%, 1);
padding: .2em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment