ccolors
I am looking for a general algorithm to smoothly transition between two colors.
For example, this image is taken from Wikipedia and shows a transition from orange to blue.
When I try to do the same using my code (C++), first idea that came to mind is using the HSV color space, but the annoying in-between colors show-up.
What is the good way to achieve this ? Seems to be related to diminution of contrast or maybe use a different color space ?
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:
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'],
...
]
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));
}
We compare:
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.