Last active
January 17, 2018 14:19
-
-
Save jneidel/df4de22198f17f5b70be94a22faf73fa to your computer and use it in GitHub Desktop.
Generate lighter/darker color
This file contains hidden or 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
| var pad = function(num, totalChars) { | |
| var pad = '0'; | |
| num = num + ''; | |
| while (num.length < totalChars) { | |
| num = pad + num; | |
| } | |
| return num; | |
| }; | |
| // Ratio is between 0 and 1 | |
| var changeColor = function(color, ratio, darker) { | |
| // Trim trailing/leading whitespace | |
| color = color.replace(/^\s*|\s*$/, ''); | |
| // Expand three-digit hex | |
| color = color.replace( | |
| /^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i, | |
| '#$1$1$2$2$3$3' | |
| ); | |
| // Calculate ratio | |
| var difference = Math.round(ratio * 256) * (darker ? -1 : 1), | |
| // Determine if input is RGB(A) | |
| rgb = color.match(new RegExp('^rgba?\\(\\s*' + | |
| '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' + | |
| '\\s*,\\s*' + | |
| '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' + | |
| '\\s*,\\s*' + | |
| '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' + | |
| '(?:\\s*,\\s*' + | |
| '(0|1|0?\\.\\d+))?' + | |
| '\\s*\\)$' | |
| , 'i')), | |
| alpha = !!rgb && rgb[4] != null ? rgb[4] : null, | |
| // Convert hex to decimal | |
| decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace( | |
| /^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i, | |
| function() { | |
| return parseInt(arguments[1], 16) + ',' + | |
| parseInt(arguments[2], 16) + ',' + | |
| parseInt(arguments[3], 16); | |
| } | |
| ).split(/,/), | |
| returnValue; | |
| // Return RGB(A) | |
| return !!rgb ? | |
| 'rgb' + (alpha !== null ? 'a' : '') + '(' + | |
| Math[darker ? 'max' : 'min']( | |
| parseInt(decimal[0], 10) + difference, darker ? 0 : 255 | |
| ) + ', ' + | |
| Math[darker ? 'max' : 'min']( | |
| parseInt(decimal[1], 10) + difference, darker ? 0 : 255 | |
| ) + ', ' + | |
| Math[darker ? 'max' : 'min']( | |
| parseInt(decimal[2], 10) + difference, darker ? 0 : 255 | |
| ) + | |
| (alpha !== null ? ', ' + alpha : '') + | |
| ')' : | |
| // Return hex | |
| [ | |
| '#', | |
| pad(Math[darker ? 'max' : 'min']( | |
| parseInt(decimal[0], 10) + difference, darker ? 0 : 255 | |
| ).toString(16), 2), | |
| pad(Math[darker ? 'max' : 'min']( | |
| parseInt(decimal[1], 10) + difference, darker ? 0 : 255 | |
| ).toString(16), 2), | |
| pad(Math[darker ? 'max' : 'min']( | |
| parseInt(decimal[2], 10) + difference, darker ? 0 : 255 | |
| ).toString(16), 2) | |
| ].join(''); | |
| }; | |
| var lighterColor = function(color, ratio) { | |
| return changeColor(color, ratio, false); | |
| }; | |
| var darkerColor = function(color, ratio) { | |
| return changeColor(color, ratio, true); | |
| }; |
This file contains hidden or 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
| Found on stack overflow: https://stackoverflow.com/questions/1507931/generate-lighter-darker-color-in-css-using-javascript | |
| Copied for convenience. |
This file contains hidden or 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
| - Create website to use script |
This file contains hidden or 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
| darkerColor('rgba(80, 75, 52, .5)', .2); | |
| lighterColor('rgba(80, 75, 52, .5)', .2); | |
| darkerColor('#F5F7FA', .2); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment