Skip to content

Instantly share code, notes, and snippets.

@mikesprague
Created September 16, 2018 11:47
Show Gist options
  • Save mikesprague/b810ade8acbfe30a4a9ff58ff4fc510a to your computer and use it in GitHub Desktop.
Save mikesprague/b810ade8acbfe30a4a9ff58ff4fc510a to your computer and use it in GitHub Desktop.
JS to lighten, darken, or blend colors (credit to/original author: https://glitch.com/@notwaldorf)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Color gradient</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script src="/script.js" defer></script>
</head>
<body>
<h1>Making colour gradients</h1>
<p>This Glitch shows you how to <b>darken</b>, <b>lighten</b> or <b>blend</b> colours in JavaScript, based on
<a href="https://stackoverflow.com/a/13542669">this most amazing</a> Stack Overflow solution I found. This isn't a full
app; it's meant to be an easily copy-pasteable bit of code for you. Enjoy!
</p>
<h2>Lighten</h2>
<div id="lighten"></div>
<h2>Darken</h2>
<div id="darken"></div>
<h2>Blend</h2>
<div id="blend"></div>
<footer>
<p>made by <a href="https://twitter.com/notwaldorf">monica</a></p>
</footer>
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
// From https://stackoverflow.com/a/13542669
// These are the magical methods!
/*
* Darkening/Lightening. Params:
* - a color in an rgb format, ex rgb(123,123,123).
* - a percent, which means how much to darken/lighten the colour.
* If the percent is positive, you're lightening. Otherwise, it's darkening.
*
* If you need your colour to be in hex form, there's an answer in that
* SO answer, otherwise, this other answer is my goto:
* https://stackoverflow.com/a/5624139
*/
function shadeRGBColor(color, percent) {
const f=color.split( ', '),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=parseInt(f[0].slice(4)),G=parseInt(f[1]),B=parseInt(f[2]);
return 'rgb( '+(Math.round((t-R)*p)+R)+ ', '+(Math.round((t-G)*p)+G)+ ', '+(Math.round((t-B)*p)+B)+ ') ';
}
/*
* Blending. Params:
* - two colors, both in an rgb format, ex rgb(123,123,123).
* - a percent, which means how much to go from the first colour to the second
*
* If you need your colour to be in hex form, there's an answer in that
* SO answer, otherwise, this other answer is my goto:
* https://stackoverflow.com/a/5624139
*/
function blendRGBColors(c0, c1, p) {
const f=c0.split( ', '),t=c1.split( ', '),R=parseInt(f[0].slice(4)),G=parseInt(f[1]),B=parseInt(f[2]);
return 'rgb( '+(Math.round((parseInt(t[0].slice(4))-R)*p)+R)+ ', '+(Math.round((parseInt(t[1])-G)*p)+G)+ ', '+(Math.round((parseInt(t[2])-B)*p)+B)+ ') ';
}
// Fill the grid.
const COLOR1 = 'rbg(255, 22, 68)';
const COLOR2 = 'rbg(68, 138, 255)';
for (let i = 0; i < 10; i++) {
const percent = i / 10;
lighten.appendChild(makeADiv(shadeRGBColor(COLOR1, percent)));
darken.appendChild(makeADiv(shadeRGBColor(COLOR1, -percent)));
blend.appendChild(makeADiv(blendRGBColors(COLOR1, COLOR2, percent)));
}
function makeADiv(color) {
const div = document.createElement('div');
div.style.display = 'inline-block';
div.style.width = '10%';
div.style.height = '50px';
div.style.backgroundColor = color;
return div;
}
/* utility methods from the SO post */
const rgbToHex = (r, g, b) => '#' + [r, g, b]
.map(x => x.toString(16).padStart(2, '0')).join('');
const hexToRgb = hex =>
hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
,(m, r, g, b) => '#' + r + r + g + g + b + b)
.substring(1).match(/.{2}/g)
.map(x => parseInt(x, 16));
/* CSS files add styling rules to your content */
* { box-sizing: border-box; }
body {
font-family: 'IBM Plex Mono', monospace;
padding: 2em;
width: 100%;
max-width: 600px;
}
h1 {
font-style: italic;
color: #FF1644;
}
p {
line-height: 1.5;
}
a {
color: inherit;
font-style: italic;
text-decoration: none;
border-bottom: 3px solid #FF80AB;
}
footer {
margin-top: 40px;
border-top: 3px solid #577eec;
}
@mikesprague
Copy link
Author

Source: https://glitch.com/edit/#!/color-gradient

How to lighten/darken/blend colours in JavaScript

I found this most amazing StackOverflow solution to this problem, so here it is for you to copy paste.

This isn't a full app, so remix this code and use it as you need it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment