This should work - just linearly scale the red and green values. Assuming your max red/green/blue value is 255
, and n
is in range 0 .. 100
R = (255 * n) / 100
G = (255 * (100 - n)) / 100
B = 0
(Amended for integer maths, tip of the hat to Ferrucio)
Another way to do would be to use a HSV colour model, and cycle the hue from 0 degrees
(red) to 120 degrees
(green) with whatever saturation and value suited you. This should give a more pleasing gradient.
Here's a demonstration of each technique - top gradient uses RGB, bottom uses HSV:
![http://i38.tinypic.com/29o0q4k.jpg](https://i.stack.imgur.com/ZkoHs.jpg)
I know this question is old, but I didn't found a pretty solution to this problem, so I investigate a little bit and want to share what I did for hypothetical future googlers.
First, convert to HSL is a great idea. But sort only by hue or light didn't solve completely the issue when your color are not "classified".
Given an array which look like:
$colors = [
[ 'color' => '#FDD4CD'],
[ 'color' => '#AE3B3B'],
[ 'color' => '#DB62A0'],
...
]
First we convert all Hex colors to HSL
foreach ($colors as &$color) {
$color['hsl'] = hexToHsl($color['color']);
}
/**
* Convert a hexadecimal color in RGB
* @param string $hex
* @return array
*/
function hexToHsl($hex){
list($r, $g, $b) = sscanf($hex, "#%02x%02x%02x");
return rgbToHsl($r, $g, $b);
}
/**
* Convert a RGB color in its HSL value
* @param int $r red
* @param int $g green
* @param int $b blue
* @return array
*/
function rgbToHsl($r, $g, $b)
{
$r /= 255;
$g /= 255;
$b /= 255;
$max = max($r, $g, $b);
$min = min($r, $g, $b);
$h = 0;
$l = ($max + $min) / 2;
$d = $max - $min;
if ($d == 0) {
$h = $s = 0; // achromatic
} else {
$s = $d / (1 - abs(2 * $l - 1));
switch ($max) {
case $r:
$h = 60 * fmod((($g - $b) / $d), 6);
if ($b > $g) {
$h += 360;
}
break;
case $g:
$h = 60 * (($b - $r) / $d + 2);
break;
case $b:
$h = 60 * (($r - $g) / $d + 4);
break;
}
}
return array('h' => round($h, 2), 's' => round($s, 2), 'l' => round($l, 2));
}
Then sort colors
We compare:
- Their hue if they are in the same 'interval' (This help to understand why I choose 30°). So we compare the hue only if both are in [0-30], [30-60], [60-90],...
- If not in the same interval, sort by their Lightness, then by saturation if both share the same Lightness.
So:
usort($colors, function ($a, $b) {
//Compare the hue when they are in the same "range"
if(!huesAreinSameInterval($a['hsl']['h'],$b['hsl']['h'])){
if ($a['hsl']['h'] < $b['hsl']['h'])
return -1;
if ($a['hsl']['h'] > $b['hsl']['h'])
return 1;
}
if ($a['hsl']['l'] < $b['hsl']['l'])
return 1;
if ($a['hsl']['l'] > $b['hsl']['l'])
return -1;
if ($a['hsl']['s'] < $b['hsl']['s'])
return -1;
if ($a['hsl']['s'] > $b['hsl']['s'])
return 1;
return 0;
});
/**
* Check if two hues are in the same given interval
* @param float $hue1
* @param float $hue2
* @param int $interval
* @return bool
*/
function huesAreinSameInterval($hue1, $hue2, $interval = 30){
return (round(($hue1 / $interval), 0, PHP_ROUND_HALF_DOWN) === round(($hue2 / $interval), 0, PHP_ROUND_HALF_DOWN));
}
rgbToHsl found on www.brandonheyer.com
hexToRgb found on stackoverflow
Best Answer
I have done tons of these in the past. The smoothing can be performed many different ways, but the way they are probably doing here is a simple linear approach. This is to say that for each R, G, and B component, they simply figure out the "y = m*x + b" equation that connects the two points, and use that to figure out the components in between.
Any new color in between is now:
There are many mathematical ways to create a transition, what we really want to do is understand what transition you really want to see. If you want to see the exact transition from the above image, it is worth looking at the color values of that image. I wrote a program way back in time to look at such images and output there values graphically. Here is the output of my program for the above pseudocolor scale.
Based upon looking at the graph, it IS more complex than a linear as I stated above. The blue component looks mostly linear, the red could be emulated to linear, the green however looks to have a more rounded shape. We could perform mathematical analysis of the green to better understand its mathematical function, and use that instead. You may find that a linear interpolation with an increasing slope between 0 and ~70 pixels with a linear decreasing slope after pixel 70 is good enough.
If you look at the bottom of the screen, this program gives some statistical measures of each color component, such as min, max, and average, as well as how many pixels wide the image read was.