Jak wygenerować wartości dla własnego wybieracza kolorów (color picker'a)

Wygenerowana tablica kolorów będzie służyła wybieraczowi kolorów dla aplikacji webowej napisanej w Pythonie. Dla przykładu plansza kolorów na wybieraczu będzie utworzona jako HTML-owa tabela z dynamicznym wpisywaniem wartości kolorów. Nie jest to optymalne rozwiązanie, ale proste.

Tabela przyjmnie postać

<table cellpadding='0' cellspacing='0'>
<tr>
<td style='width:2px;height:2px;background-color: rgb(colR,colG,colB);'>
</td>
...
</tr>
...
</table>

gdzie colR, colG, colB są wartościami czerwieni, zieleni i błękitu w przedziale (0-255).

Wyświetlane kolory należą do trójwymiarowej przestrzeni RGB. Plansza kolorów wybieracza kolorów windowsowego programu Paint wyświetla kolory w przestrzeni HSL o stałym L=0.5. Jest więc to dwuwymiarowa przestrzeń. H oznacza odcień (ang. hue), S - nasycenie (ang. saturation), a L - świetło (ang. lightness). Nasza tabela będzie miała wymiary 100 na 100, a wartości HSL będą z przedziału 0-1.

Wartości z przestrzeni HSL o stałym L należy przeliczyć na wartości RGB. W tym celu skorzystam z algorytmu znalezionego w Inetrnecie, a kod programu zapiszę w języku Python.

L = 0.5

html = """
<table cellpadding='0' cellspacing='0'>
"""

for i in range(99,-1,-1):
S = i/100.0
html += '<tr>'
for j in range(100):
H = j/100.0
temp2=L+S - L*S
temp1 = 2.0*L - temp2
Rtemp3=H+1.0/3.0
if Rtemp3 < 0:
Rtemp3 = Rtemp3 + 1.0
if Rtemp3 > 1:
Rtemp3 = Rtemp3 - 1.0
Gtemp3=H
if Gtemp3 < 0:
Gtemp3 = Gtemp3 + 1.0
if Gtemp3 > 1:
Gtemp3 = Gtemp3 - 1.0
Btemp3=H-1.0/3.0
if Btemp3 < 0:
Btemp3 = Btemp3 + 1.0
if Btemp3 > 1:
Btemp3 = Btemp3 - 1.0

if S == 0:
R = L
G = L
B = L
else:
if 6.0*Rtemp3 < 1:
R = temp1+(temp2-temp1)*6.0*Rtemp3
elif 2.0*Rtemp3 < 1:
R = temp2
elif 3.0*Rtemp3 < 2:
R = temp1+(temp2-temp1)*((2.0/3.0)-Rtemp3)*6.0
else:
R = temp1

if 6.0*Gtemp3 < 1:
G = temp1+(temp2-temp1)*6.0*Gtemp3
elif 2.0*Gtemp3 < 1:
G = temp2
elif 3.0*Gtemp3 < 2:
G = temp1+(temp2-temp1)*((2.0/3.0)-Gtemp3)*6.0
else:
G = temp1

if 6.0*Btemp3 < 1:
B = temp1+(temp2-temp1)*6.0*Btemp3
elif 2.0*Btemp3 < 1:
B = temp2
elif 3.0*Btemp3 < 2:
B = temp1+(temp2-temp1)*((2.0/3.0)-Btemp3)*6.0
else:
B = temp1

R1 = int(256*R)
G1 = int(256*G)
B1 = int(256*B)
line= "<td style='width:2px;height:2px;background-color: rgb("+str(R1)+","+str(G1)+","+str(B1)+");'></td>"
html += line
html += '</tr>'



html += """
</table>
"""

W wybieraczu kolorów programu Paint w systemie Windows, plansza kolorów jest stała i światło (lub jaskrawość) wynosi 0.5. Z boku znajduje się jednak suwak zmieniający jaskrawość. Zmiana jaskrawości na suwaku nie zmienia planszy, ale zmienia kolor wynikowy pokazywany w osobnym prostokącie. W ten sposób otrzymujemy trójwymiarową przestrzeń HSL.

Różne programy graficzne, np. GIMP, używają innego modelu przy wyborze kolorów. Jest to model HSV. W programie GIMP istnieje kilka plansz kolorów.