Skip to content

Instantly share code, notes, and snippets.

@DigiTec

DigiTec/LightDarkColorPicker.html

Last active December 10, 2015 07:58
Show Gist options
  • Save DigiTec/4404791 to your computer and use it in GitHub Desktop.
Save DigiTec/4404791 to your computer and use it in GitHub Desktop.
Download ZIP
A simple gist for picking lighter and darker colors based on a current color. Outputs the values in hex, rgb, and rgba for direct use in your CSS. This is inspired by a task I had to pick a darker background color for a UI element so that it would stand out on top of a lighter background. The elements still needed to be themed to their color pro…
Raw
LightDarkColorPicker.html
<!-- saved from url=(0014)about:internet -->
<!DOCTYPE HTML>
<script>
function Color(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
Object.defineProperties(Color, {
colorFromHex: {
value: function colorFromHex(hex) {
if (hex.match(/^\s*#?([a-fA-F0-9]{3}|[a-fA-F0-9]{6})\s*$/)) {
var hexColor = RegExp.$1;
if (hexColor.length === 3) {
var r = parseInt(hexColor.charAt(0)+hexColor.charAt(0), 16);
var g = parseInt(hexColor.charAt(1)+hexColor.charAt(1), 16);
var b = parseInt(hexColor.charAt(2)+hexColor.charAt(2), 16);
return new Color(r, g, b);
}
else {
var rgb = parseInt(hexColor, 16);
var r = (rgb & 0xFF0000) >> 16;
var g = (rgb & 0xFF00) >> 8;
var b = rgb & 0xFF;
return new Color(r, g, b);
}
}
return null;
}
}
});
Object.defineProperties(Color.prototype, {
lighten: {
value: function lighten(by) {
// Clamp input
by = Math.max(0, Math.min(1, by));
return new Color(
(this.r + (255 - this.r) * by + 0.5) >> 0,
(this.g + (255 - this.g) * by + 0.5) >> 0,
(this.b + (255 - this.b) * by + 0.5) >> 0);
}
},
darken: {
value: function darken(by) {
// Clamp input
by = Math.max(0, Math.min(1, by));
return new Color(
(this.r - this.r * by + 0.5) >> 0,
(this.g - this.g * by + 0.5) >> 0,
(this.b - this.b * by + 0.5) >> 0);
}
},
toHex: {
value: function toHex() {
var zeroString = "000000";
var hexString = ((this.r << 16) + (this.g << 8) + this.b).toString(16);
return "#" + zeroString.substring(0, 6 - hexString.length) + hexString;
}
},
toCssRgb: {
value: function toCssRgb() {
return "rgb(" + this.r + "," + this.g + "," + this.b + ")";
}
},
toCssRgba: {
value: function toCssRgba() {
return "rgba(" + this.r + "," + this.g + "," + this.b + ", 1)";
}
}
});
function setup() {
document.getElementById("btnConvert").addEventListener("click", convertColors);
}
function convertColors(evt) {
function _formatSpan(colorString) {
var formattedSpan = document.createElement("span");
formattedSpan.style.width = "150px";
formattedSpan.style.height = "20px";
formattedSpan.style.display = "inline-block";
formattedSpan.style.textAlign = "center";
formattedSpan.style.backgroundColor = colorString;
formattedSpan.innerText = colorString;
return formattedSpan;
}
var colorValue = document.getElementById("txtColor").value;
var color = Color.colorFromHex(colorValue);
if (color !== null) {
var outputGrid = document.getElementById("outputGrid");
outputGrid.innerText = "";
for (var i = 0; i <= 10; i++) {
var lightenColor = color.lighten(i * 0.1);
var darkenColor = color.darken(i * 0.1);
outputGrid.appendChild(_formatSpan(lightenColor.toHex()));
outputGrid.appendChild(_formatSpan(darkenColor.toHex()));
outputGrid.appendChild(_formatSpan(lightenColor.toCssRgb()));
outputGrid.appendChild(_formatSpan(darkenColor.toCssRgb()));
outputGrid.appendChild(_formatSpan(lightenColor.toCssRgba()));
outputGrid.appendChild(_formatSpan(darkenColor.toCssRgba()));
outputGrid.appendChild(document.createElement("br"));
}
}
}
</script>
<body onload="setup();">
<input id="txtColor" type="text" value="F8C13E" /> <button id="btnConvert">Convert</button>
<div id="outputGrid">
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment