Odkąd wspomniałeś, że masz nieruchome tło, kolor kulek może nadal być losowy, ale muszą spadać w pewnych zakresach, które nadal uzupełniają tło.
Podstawy Zanim to zrobimy, musisz znać podstawy. Rozważ następujące kolory:
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)
Mieszanka kolorów RGB [(0..255), (0..255), (0..255)] tworzy nowe kolory jak wyżej.
Obliczanie kolorów ujemnych Obliczanie kolorów ujemnych jest jak przekształcenie koloru czerwonego na cyjan, zielonego na fioletowy i niebieskiego na żółty.
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)
Kolor uzupełniający
Zgodnie z odniesieniem na Computing uzupełniające kolory: http://serennu.com/colour/rgbtohsl.php
O HSL
HSL wyraża kolory w kategoriach ich barwy, nasycenia i jasności, podając liczbę dla każdego z tych trzech atrybutów koloru.
Barwa to pozycja koloru na kole kolorów, wyrażona w stopniach od 0 ° do 359 °, reprezentująca 360 ° koła; 0 ° to czerwony, 180 ° to przeciwny kolor cyjanu i tak dalej.
Nasycenie to intensywność koloru, jak nudny lub jasny. Im niższe nasycenie, tym bardziej matowy (bardziej szary) kolor. Jest to wyrażone w procentach, 100% oznacza pełne nasycenie, najjaśniejsze, a 0% oznacza brak nasycenia, szare.
Lekkość to jasność koloru. Nieznacznie różni się od nasycenia. Im bardziej biały kolor, tym wyższa jest jego wartość jasności, tym więcej czerni, tym niższa jest jego jasność. Tak więc 100% lekkości zmienia kolor na biały, 0% lekkości zmienia kolor na czarny, a „czysty” kolor to 50% lekkości.
Łatwiej jest dostrzec różnicę między nasyceniem a jasnością niż wyjaśnić to. Jeśli chcesz to wyjaśnić, spróbuj przejrzeć warianty Jasność i Nasycenie na stronie kalkulatora kolorów, wybierając dość jasny kolor jako kolor początkowy.
Tak wygląda notacja HSL, podając wartości Barwy, Nasycenia i Jasności w następującej kolejności: t
Czerwony: 0 ° 100% 50% Jasnoróżowy: 0 ° 100% 90% Cyjan: 180 ° 100% 50% Oto kroki:
Konwertuj kolor na HSL.
Zmień wartość Barwy na wartość Barwy przeciwnej (np. Jeśli Barwa wynosi 50 °, przeciwna wartość będzie na 230 ° na kole - 180 ° dalej).
Pozostaw wartości nasycenia i lekkości takie, jakie były.
Konwertuj tę nową wartość HSL z powrotem na oryginalny zapis kolorów (RGB lub cokolwiek innego).
Strony takie jak EasyRGB.com mogą generować ogólne konwersje z RGB na HSL i odwrotnie.
Przykład programowania wykonany w PHP zgodnie z odnośnikiem
Konwersja RGB z HSL
Wartość powyżej niebieskiego # 0000FF rgb (0,0,255) można przedstawić jako czerwony szesnastkowy 00 + zielony szesnastkowy 00 + niebieski szesnastkowy FF
$redhex = substr($hexcode,0,2);
$greenhex = substr($hexcode,2,2);
$bluehex = substr($hexcode,4,2);
Może być również prezentowany jako czerwony dziesiętny 0 + zielony dziesiętny 0 + niebieski dziesiętny 255
$var_r = (hexdec($redhex)) / 255;
$var_g = (hexdec($greenhex)) / 255;
$var_b = (hexdec($bluehex)) / 255;
Teraz podłącz te wartości do procedury rgb2hsl. Poniżej moja wersja PHP ogólnego kodu EasyRGB.com do tej konwersji:
Dane wejściowe to $ var_r, $ var_g i $ var_b z góry Dane wyjściowe są równoważne HSL jako $ h, $ s i $ l - są one ponownie wyrażane jako ułamki 1, podobnie jak wartości wejściowe
$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;
};
};
Teraz mamy kolor jako wartość HSL w zmiennych $ h, $ s i $ l. Te trzy zmienne wyjściowe są ponownie utrzymywane jako ułamki 1 na tym etapie, a nie jako stopnie i procenty. Na przykład cyjan (180 ° 100% 50%) wyszedłby jako $ h = 0,5, $ s = 1, a $ l = 0,5.
Następnie znajdź wartość przeciwnego odcienia, tj. Oddaloną o 180 ° lub 0,5 (jestem pewien, że matematycy mają bardziej elegancki sposób na kropkowanie tego, ale):
Oblicz przeciwny odcień, $ h2
$h2 = $h + 0.5;
if ($h2 > 1)
{
$h2 -= 1;
};
Wartość HSL koloru uzupełniającego jest teraz w $ h2, $ s, $ l. Jesteśmy więc gotowi przekonwertować to z powrotem na RGB (znowu moja wersja PHP formuły EasyRGB.com). Uwaga: tym razem formaty wejściowe i wyjściowe są różne, zobacz moje komentarze na górze kodu:
Wejście to wartość HSL koloru uzupełniającego, przechowywana w $ h2, $ s, $ l jako ułamki 1 Wyjście to RGB w normalnym formacie 255 255 255, przechowywane w $ r, $ g, $ b Odcień jest konwertowany za pomocą funkcji hue_2_rgb, pokazano na końcu tego kodu
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);
};
Po tej procedurze mamy wreszcie $ r, $ gi $ bw formacie 255 255 255 (RGB), które możemy przekonwertować na sześć cyfr szesnastkowych:
$rhex = sprintf("%02X",round($r));
$ghex = sprintf("%02X",round($g));
$bhex = sprintf("%02X",round($b));
$rgbhex = $rhex.$ghex.$bhex;
$ rgbhex to nasza odpowiedź - kolor uzupełniający w heksie.
Ponieważ tło w kolorze jest niebieskie lub 0,0,255, HSL jest
Barwa (H): 240 stopni / Nasycenie (S): 100% / Jasność (L): 4,9%
naprzeciwko 240 jest 60 w kole, a następnie konwersja z powrotem do RGB daje wartość # 181800