Puisque vous avez mentionné que vous aviez un arrière-plan fixe, la couleur des boules peut toujours être aléatoire, mais elles doivent tomber à certaines plages qui complimentent encore l'arrière-plan.
Les bases. Avant de faire cela, vous devez connaître les bases. Considérez les couleurs suivantes:
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)
Mélange de couleurs RVB [(0..255), (0..255), (0..255)] crée de nouvelles couleurs comme ci-dessus.
Calcul des couleurs négatives Le calcul des couleurs négatives revient à transformer le rouge en cyan, le vert en violet, le bleu en jaune.
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)
Couleur complémentaire
Selon la référence sur l'informatique des couleurs complémentaires: http://serennu.com/colour/rgbtohsl.php
À propos de HSL
HSL exprime les couleurs en termes de teinte, de saturation et de luminosité, en donnant un nombre pour chacun de ces trois attributs de la couleur.
La teinte est la position de la couleur sur la roue chromatique, exprimée en degrés de 0 ° à 359 °, représentant les 360 ° de la roue; 0 ° étant rouge, 180 ° étant la couleur opposée du rouge cyan, et ainsi de suite.
La saturation est l'intensité de la couleur, à quel point elle est terne ou lumineuse. Plus la saturation est faible, plus la couleur est terne (plus grise). Ceci est exprimé en pourcentage, 100% étant la pleine saturation, le plus brillant et 0% étant sans saturation, le gris.
La légèreté est la luminosité de la couleur. Légèrement différent de la saturation. Plus la couleur est blanche, plus sa valeur de luminosité est élevée, plus elle est noire, plus sa luminosité est faible. Ainsi, 100% de légèreté transforme la couleur en blanc, 0% de légèreté transforme la couleur en noir et la couleur "pure" serait de 50% de légèreté.
Il est plus facile de voir la différence entre la saturation et la légèreté que de l'expliquer. Si vous souhaitez clarifier, essayez d'afficher les variations de luminosité et de saturation sur la page du calculateur de couleurs, en choisissant une couleur assez brillante comme couleur de départ.
Ainsi, la notation HSL ressemble à ceci, donnant les valeurs de teinte, de saturation et de luminosité dans cet ordre: t
Rouge: 0 ° 100% 50% Rose pâle: 0 ° 100% 90% Cyan: 180 ° 100% 50% Voici les étapes:
Convertissez votre couleur en HSL.
Modifiez la valeur de la teinte à celle de la teinte opposée (par exemple, si votre teinte est de 50 °, l'opposé sera à 230 ° sur la roue - 180 ° plus loin).
Laissez les valeurs de saturation et de luminosité telles qu'elles étaient.
Convertissez cette nouvelle valeur HSL à votre notation de couleur d'origine (RVB ou autre).
Des sites comme EasyRGB.com peuvent effectuer pour vous une conversion générique de RVB à HSL ou vice versa.
Exemple de programmation fait en PHP selon la référence
Conversion de RVB à HSL
La valeur supérieure à Blue # 0000FF rgb (0,0,255) peut être présentée comme Red Hexadecimal 00 + Green Hexadecimal 00 + Blue Hexadecimal FF
$redhex = substr($hexcode,0,2);
$greenhex = substr($hexcode,2,2);
$bluehex = substr($hexcode,4,2);
Il peut également être présenté en rouge décimal 0 + vert décimal 0 + bleu décimal 255
$var_r = (hexdec($redhex)) / 255;
$var_g = (hexdec($greenhex)) / 255;
$var_b = (hexdec($bluehex)) / 255;
Maintenant, branchez ces valeurs dans la routine rgb2hsl. Voici ma version PHP du code générique d'EasyRGB.com pour cette conversion:
L'entrée est $ var_r, $ var_g et $ var_b d'en haut La sortie est HSL équivalente à $ h, $ s et $ l - ceux-ci sont à nouveau exprimés en fractions de 1, comme les valeurs d'entrée
$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;
}
else
{
if ($l < 0.5)
{
$s = $del_max / ($var_max + $var_min);
}
else
{
$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;
};
};
Alors maintenant, nous avons la couleur comme valeur HSL, dans les variables $ h, $ s et $ l. Ces trois variables de sortie sont à nouveau considérées comme des fractions de 1 à ce stade, plutôt que comme des degrés et des pourcentages. Ainsi, par exemple, le cyan (180 ° 100% 50%) apparaîtrait comme $ h = 0,5, $ s = 1 et $ l = 0,5.
Ensuite, trouvez la valeur de la teinte opposée, c'est-à-dire celle qui est à 180 °, ou 0,5, loin (je suis sûr que les mathématiciens ont une façon plus élégante de le noter, mais):
Calculez la teinte opposée, $ h2
$h2 = $h + 0.5;
if ($h2 > 1)
{
$h2 -= 1;
};
La valeur HSL de la couleur complémentaire est maintenant en $ h2, $ s, $ l. Nous sommes donc prêts à reconvertir cela en RVB (encore une fois, ma version PHP de la formule EasyRGB.com). Notez que les formats d'entrée et de sortie sont différents cette fois, voir mes commentaires en haut du code:
L'entrée est la valeur HSL de la couleur complémentaire, contenue dans $ h2, $ s, $ l sous forme de fractions de 1 La sortie est RVB au format 255 255 255 normal, conservée dans $ r, $ g, $ b La teinte est convertie à l'aide de la fonction hue_2_rgb, illustrée à la fin de ce code
if ($s == 0)
{
$r = $l * 255;
$g = $l * 255;
$b = $l * 255;
}
else
{
if ($l < 0.5)
{
$var_2 = $l * (1 + $s);
}
elset
{
$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
function hue_2_rgb($v1,$v2,$vh)
{
if ($vh < 0)
{
$vh += 1;
};
if ($vh > 1)
{
$vh -= 1;
};
if ((6 * $vh) < 1)
{
return ($v1 + ($v2 - $v1) * 6 * $vh);
};
if ((2 * $vh) < 1)
{
return ($v2);
};
if ((3 * $vh) < 2)
{
return ($v1 + ($v2 - $v1) * ((2 / 3 - $vh) * 6));
};
return ($v1);
};
Et après cette routine, nous avons enfin $ r, $ g et $ b au format 255 255 255 (RGB), que nous pouvons convertir en six chiffres hexadécimaux:
$rhex = sprintf("%02X",round($r));
$ghex = sprintf("%02X",round($g));
$bhex = sprintf("%02X",round($b));
$rgbhex = $rhex.$ghex.$bhex;
$ rgbhex est notre réponse - la couleur complémentaire en hexadécimal.
Étant donné que votre arrière-plan de couleur est bleu ou 0,0255, le HSL est
Teinte (H): 240 degrés / Saturation (S): 100% / Luminosité (L): 4,9%
l'opposé de 240 est 60 dans un cercle puis reconvertir en RVB donne une valeur de # 181800