Gradients, Maths and Insanity

gradients_maths_and_insanity.md

Here a quick thought of insanity before I leave the office at ~1.05am. I dwell and fret over design, particularly when its me making the decision, to the point of insanity (a recurring theme here).

If I have a base color, I use Adobe's Kuler to get matching colors (with some rule depending) or I checkout ColourLovers to use a platte crafted by someone with a keener eye than I. Similarly I use a typography calculator to define font sizes relative to each other and so on, so on. I have a whole bunch of these rules and methods I use so I can sleep easier knowing there is method behind my design choices.

Heres one I came up against just there, I wanted to put in a nice gradient as background in something I'm building at the moment, like anyone else who is a regular connoisseur of GitHub's trending repos, I stumbled across uiGradients (Repo).

I saw a gradient with a color differential I liked called "Reef", straight forward enough it goes a shade of blue to a darker shade of blue.

It's lighter blue color #00d2ff, I needed to be the color I'm working with, say #00aeef, in order to stick with the rest of the design. Given the color it blends into was #3a7bd5, I needed to update that accordingly to maintain the level of differential I orginally liked.

So the trick was to calculate the difference between my color (#00aeef) and the original lighter color (#00d2ff), take the difference percentage and apply it to secondary color to achieve harmony. Smarter people then me have already done the work to calculate differences between hex colors:

from krypton / colormeter.js

function color_meter(cwith, ccolor) {
    
    if (!cwith && !ccolor) return;
    
    var _cwith  = (cwith.charAt(0)=="#") ? cwith.substring(1,7) : cwith;
    var _ccolor = (ccolor.charAt(0)=="#") ? ccolor.substring(1,7) : ccolor;
    
    var _r = parseInt(_cwith.substring(0,2), 16);
    var _g = parseInt(_cwith.substring(2,4), 16);
    var _b = parseInt(_cwith.substring(4,6), 16);
 
    var __r = parseInt(_ccolor.substring(0,2), 16);
    var __g = parseInt(_ccolor.substring(2,4), 16);
    var __b = parseInt(_ccolor.substring(4,6), 16);
    
    var p1 = (_r / 255) * 100;
    var p2 = (_g / 255) * 100;
    var p3 = (_b / 255) * 100;
 
    var perc1 = Math.round((p1 + p2 + p3) / 3);
    
    var p1 = (__r / 255) * 100;
    var p2 = (__g / 255) * 100;
    var p3 = (__b / 255) * 100;
    
    var perc2 = Math.round((p1 + p2 + p3) / 3);
    
    return Math.abs(perc1 - perc2);   
}

In the JS console this gave a difference of 7% from my color to the lighter blue color.

> color_meter("#00aeef", "#00d2ff")
  7

Next to find out what hex value is that of the secondary color #3a7bd5 when a difference of 7% is applied. Similarly a quick google searched yielded an answer on StackOverflow:

from Programmatically Lighten or Darken a hex color (or rgb, and blend colors)

function shadeColor1(color, percent) {  
    var num = parseInt(color.slice(1),16), amt = Math.round(2.55 * percent), R = (num >> 16) + amt, G = (num >> 8 & 0x00FF) + amt, B = (num & 0x0000FF) + amt;
    return "#" + (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (G<255?G<1?0:G:255)*0x100 + (B<255?B<1?0:B:255)).toString(16).slice(1);
}

In the console once again, the magic secondary hex value was #4c8de7:

> shadeColor1("#3a7bd5", 7)
  "#4c8de7"

And now I have a pretty looking gradient and I'll sleep like a baby tonight.

👍

👍