Da Sie din erwähnt haben, dass Sie einen stationären Hintergrund haben, kann die Farbe der Kugeln immer noch zufällig sein, aber sie müssen in bestimmten Bereichen fallen, die den Hintergrund noch ergänzen.
Grundlagen. Bevor wir das tun, müssen Sie die Grundlagen kennen. Betrachten Sie die folgenden Farben:
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)
Farbmischung RGB [(0..255), (0..255), (0..255)] erzeugt neue Farben wie oben.
Berechnen für negative Farben Das Berechnen für negative Farben entspricht dem Umwandeln von Rot in Cyan, Grün in Lila und Blau in Gelb.
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)
Komplementärfarbe
Informationen zum Computing von Komplementärfarben finden Sie unter http://serennu.com/colour/rgbtohsl.php
Über HSL
HSL drückt Farben in Bezug auf Farbton, Sättigung und Helligkeit aus und gibt für jedes dieser drei Farbattribute eine Zahl an.
Der Farbton ist die Position der Farbe auf dem Farbkreis, ausgedrückt in Grad von 0 ° bis 359 °, was die 360 ° des Kreises darstellt. 0 ° ist rot, 180 ° ist die gegenüberliegende Farbe von Rot, Cyan und so weiter.
Die Sättigung ist die Intensität der Farbe, wie langweilig oder hell sie ist. Je niedriger die Sättigung, desto trüber (grauer) wirkt die Farbe. Dies wird als Prozentsatz ausgedrückt, wobei 100% die vollständige Sättigung, der hellste Wert und 0% keine Sättigung, grau sind.
Helligkeit ist, wie hell die Farbe ist. Etwas anders als die Sättigung. Je mehr Weiß in der Farbe enthalten ist, desto höher ist der Helligkeitswert. Je mehr Schwarz ist, desto geringer ist die Helligkeit. So wird aus 100% Helligkeit die Farbe Weiß, aus 0% Helligkeit die Farbe Schwarz, und die "reine" Farbe wäre 50% Helligkeit.
Es ist einfacher, den Unterschied zwischen Sättigung und Helligkeit zu erkennen, als ihn zu erklären. Wenn Sie dies klären möchten, versuchen Sie, die Helligkeits - und Sättigungsvarianten auf der Seite des Farbrechners anzuzeigen, und wählen Sie eine ziemlich helle Farbe als Startfarbe.
Die HSL-Notation sieht also so aus und gibt die Werte für Farbton, Sättigung und Helligkeit in dieser Reihenfolge an: t
Rot: 0 ° 100% 50% Hellrosa: 0 ° 100% 90% Cyan: 180 ° 100% 50% Hier sind die Schritte:
Konvertieren Sie Ihre Farbe in HSL.
Ändern Sie den Farbtonwert in den Wert des gegenüberliegenden Farbtons (wenn Ihr Farbton z. B. 50 ° beträgt, befindet sich der gegenüberliegende Wert auf dem Rad bei 230 ° - 180 ° weiter herum).
Lassen Sie die Werte für Sättigung und Helligkeit unverändert.
Konvertieren Sie diesen neuen HSL-Wert zurück in Ihre ursprüngliche Farbnotation (RGB oder was auch immer).
Websites wie EasyRGB.com können generische Konvertierungen von RGB in HSL oder umgekehrt für Sie durchführen.
Programmierbeispiel in PHP gemäß Referenz
Konvertierung von RGB nach HSL
Der Wert über Blue # 0000FF rgb (0,0,255) kann als Red Hexadecimal 00 + Green Hexadecimal 00 + Blue Hexadecimal FF dargestellt werden
$redhex = substr($hexcode,0,2);
$greenhex = substr($hexcode,2,2);
$bluehex = substr($hexcode,4,2);
Es kann auch als rote Dezimalzahl 0 + grüne Dezimalzahl 0 + blaue Dezimalzahl 255 dargestellt werden
$var_r = (hexdec($redhex)) / 255;
$var_g = (hexdec($greenhex)) / 255;
$var_b = (hexdec($bluehex)) / 255;
Stecken Sie nun diese Werte in die Routine rgb2hsl. Unten ist meine PHP-Version des generischen Codes von EasyRGB.com für diese Konvertierung aufgeführt:
Die Eingabe ist $ var_r, $ var_g und $ var_b von oben. Die Ausgabe ist HSL-äquivalent zu $ h, $ s und $ l - diese werden wiederum wie die Eingabewerte als Brüche von 1 ausgedrückt
$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;
};
};
Jetzt haben wir die Farbe als HSL-Wert in den Variablen $ h, $ s und $ l. Diese drei Ausgabevariablen werden zu diesem Zeitpunkt wieder als Bruchteile von 1 und nicht als Grad und Prozent gehalten. So würde beispielsweise Cyan (180 ° 100% 50%) als $ h = 0,5, $ s = 1 und $ l = 0,5 ausgegeben.
Finden Sie als nächstes den Wert des gegenüberliegenden Farbtons, dh den Wert, der 180 ° oder 0,5 ° entfernt ist (ich bin sicher, die Mathematiker haben eine elegantere Art, dies zu punktieren, aber):
Berechnen Sie den entgegengesetzten Farbton, $ h2
$h2 = $h + 0.5;
if ($h2 > 1)
{
$h2 -= 1;
};
Der HSL-Wert der Komplementärfarbe ist jetzt in $ h2, $ s, $ l. Also sind wir bereit, dies wieder in RGB umzuwandeln (wieder meine PHP-Version der EasyRGB.com-Formel). Beachten Sie, dass die Eingabe- und Ausgabeformate diesmal unterschiedlich sind. Siehe meine Kommentare oben im Code:
Die Eingabe ist der HSL-Wert der Komplementärfarbe, der in $ h2, $ s, $ l als Bruchteile von 1 gespeichert ist. Die Ausgabe ist RGB im normalen Format 255, 255, gehalten in $ r, $ g, $ b. Der Farbton wird mit der gezeigten Funktion hue_2_rgb konvertiert am Ende dieses Codes
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);
};
Und nach dieser Routine haben wir endlich $ r, $ g und $ b im Format 255 255 255 (RGB), das wir in sechs hexadezimale Ziffern konvertieren können:
$rhex = sprintf("%02X",round($r));
$ghex = sprintf("%02X",round($g));
$bhex = sprintf("%02X",round($b));
$rgbhex = $rhex.$ghex.$bhex;
$ rgbhex ist unsere Antwort - die Komplementärfarbe in hex.
Da Ihr Farbhintergrund blau oder 0,0,255 ist, ist die HSL
Farbton (H): 240 Grad / Sättigung (S): 100% / Helligkeit (L): 4,9%
Das Gegenteil von 240 ist 60 in einem Kreis, dann ergibt die Rückkonvertierung in RGB einen Wert von # 181800