Created
September 16, 2018 11:47
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.