Since you din mentioned you got a stationary background, the color of the balls can still be a random but they have to fall at certain ranges that still compliments the background.
Basics. Before we do that you need to know the basics. Consider the following colors:
Black #000000 rgb(0,0,0)
Red #FF0000 rgb(255,0,0)
Green #00FF00 rgb(0,255,0)
Blue #0000FF rgb(0,0,255)
Yellow #FFFF00 rgb(255,255,0)
Cyan #00FFFF rgb(0,255,255)
Pink #FF00FF rgb(255,0,255)
Gray #C0C0C0 rgb(192,192,192)
White #FFFFFF rgb(255,255,255)
Mixture of Colors RGB [(0..255),(0..255),(0..255)] creates new colors as above.
Computing for Negative Colours Computing for negative color is just like transform red in cyan, green in purple, blue in yellow.
Red #FF0000 rgb(255,0,0) -> Cyan #00FFFF rgb(0,255,255)
Green #00FF00 rgb(0,255,0) -> Purple #FF00FF rgb(255,0,255)
Blue #0000FF rgb(0,0,255) -> Yellow #FFFF00 rgb(255,255,0)
As per reference on Computing complementary colors: http://serennu.com/colour/rgbtohsl.php
HSL expresses colours in terms of their Hue, Saturation and Lightness, giving a number for each of these three attributes of the colour.
The Hue is the colour's position on the colour wheel, expressed in degrees from 0° to 359°, representing the 360° of the wheel; 0° being red, 180° being red's opposite colour cyan, and so on.
Saturation is the intensity of the colour, how dull or bright it is. The lower the saturation, the duller (greyer) the colour looks. This is expressed as a percentage, 100% being full saturation, the brightest, and 0% being no saturation, grey.
Lightness is how light the colour is. Slightly different to saturation. The more white in the colour the higher its Lightness value, the more black, the lower its Lightness. So 100% Lightness turns the colour white, 0% Lightness turns the colour black, and the "pure" colour would be 50% Lightness.
It's easier to see the difference between Saturation and Lightness than to explain it. If you want to clarify, try viewing the Lightness and Saturation variations on the colour calculator page, choosing quite a bright colour as your starter colour.
So HSL notation looks like this, giving the Hue, Saturation and Lightness values in that order:t
Red: 0° 100% 50%
Pale pink: 0° 100% 90%
Cyan: 180° 100% 50%
Here are the Steps:
Convert your colour to HSL.
Change the Hue value to that of the Hue opposite (e.g., if your Hue is 50°, the opposite one will be at 230° on the wheel — 180° further around).
Leave the Saturation and Lightness values as they were.
Convert this new HSL value back to your original colour notation (RGB or whatever).
Sites like EasyRGB.com can do generic conversion for you from RGB to HSL or vice versa.
Programming Example done in PHP as per reference
Conversion from RGB to HSL
The value above Blue #0000FF rgb(0,0,255) can be presented as
Red Hexadecimal 00 + Green Hexadecimal 00 + Blue Hexadecimal FF
$redhex = substr($hexcode,0,2);
$greenhex = substr($hexcode,2,2);
$bluehex = substr($hexcode,4,2);
It can also be presented as
Red Decimal 0 + Green Decimal 0 + Blue Decimal 255
$var_r = (hexdec($redhex)) / 255;
$var_g = (hexdec($greenhex)) / 255;
$var_b = (hexdec($bluehex)) / 255;
Now plug these values into the rgb2hsl routine. Below is my PHP version of EasyRGB.com's generic code for that conversion:
Input is $var_r, $var_g and $var_b from above
Output is HSL equivalent as $h, $s and $l — these are again expressed as fractions of 1, like the input values
$var_min = min($var_r,$var_g,$var_b);ttt
$var_max = max($var_r,$var_g,$var_b);
$del_max = $var_max - $var_min;
$l = ($var_max + $var_min) / 2;
if ($del_max == 0)
$h = 0;
$s = 0;
if ($l < 0.5)
$s = $del_max / ($var_max + $var_min);
$s = $del_max / (2 - $var_max - $var_min);
$del_r = ((($var_max - $var_r) / 6) + ($del_max / 2)) / $del_max;
$del_g = ((($var_max - $var_g) / 6) + ($del_max / 2)) / $del_max;
$del_b = ((($var_max - $var_b) / 6) + ($del_max / 2)) / $del_max;
if ($var_r == $var_max)
$h = $del_b - $del_g;
elseif ($var_g == $var_max)
$h = (1 / 3) + $del_r - $del_b;
elseif ($var_b == $var_max)
$h = (2 / 3) + $del_g - $del_r;
if ($h < 0)
$h += 1;
if ($h > 1)
$h -= 1;
So now we have the colour as an HSL value, in the variables $h, $s and $l. These three output variables are again held as fractions of 1 at this stage, rather than as degrees and percentages. So e.g., cyan (180° 100% 50%) would come out as $h = 0.5, $s = 1, and $l = 0.5.
Next find the value of the opposite Hue, i.e., the one that's 180°, or 0.5, away (I'm sure the mathematicians have a more elegant way of doting this, but):
Calculate the opposite hue, $h2
$h2 = $h + 0.5;
if ($h2 > 1)
$h2 -= 1;
The HSL value of the complementary colour is now in $h2, $s, $l. So we're ready to convert this back to RGB (again, my PHP version of the EasyRGB.com formula). Note the input and output formats are different this time, see my comments at the top of the code:
Input is HSL value of complementary colour, held in $h2, $s, $l as fractions of 1
Output is RGB in normal 255 255 255 format, held in $r, $g, $b
Hue is converted using function hue_2_rgb, shown at the end of this code
if ($s == 0)
$r = $l * 255;
$g = $l * 255;
$b = $l * 255;
if ($l < 0.5)
$var_2 = $l * (1 + $s);
$var_2 = ($l + $s) - ($s * $l);
$var_1 = 2 * $l - $var_2;
$r = 255 * hue_2_rgb($var_1,$var_2,$h2 + (1 / 3));
$g = 255 * hue_2_rgb($var_1,$var_2,$h2);
$b = 255 * hue_2_rgb($var_1,$var_2,$h2 - (1 / 3));
// Function to convert hue to RGB, called from above
if ($vh < 0)
$vh += 1;
if ($vh > 1)
$vh -= 1;
if ((6 * $vh) < 1)
return ($v1 + ($v2 - $v1) * 6 * $vh);
if ((2 * $vh) < 1)
if ((3 * $vh) < 2)
return ($v1 + ($v2 - $v1) * ((2 / 3 - $vh) * 6));
And after that routine, we finally have $r, $g and $b in 255 255 255 (RGB) format, which we can convert to six digits of hex:
$rhex = sprintf("%02X",round($r));
$ghex = sprintf("%02X",round($g));
$bhex = sprintf("%02X",round($b));
$rgbhex = $rhex.$ghex.$bhex;
$rgbhex is our answer — the complementary colour in hex.
Since your color background is blue or 0,0,255 the HSL is
Hue (H): 240 degrees / Saturation (S):100% / Lightness (L):4.9%
opposite of 240 is 60 in a circle
then convert back to RGB gives a value of #181800