Kolory
czwartek, 20 maja 2010
Problem
Wczoraj, chcąc poprawić czytelność wykresu, natknąłem się na problem, który trochę mnie zaskoczył.
Okazuje się że element Canvas, nie akceptuje definicji kolorów w modelu HSL, a jedynie RGB.
Jest to trochę dziwne. Wszystkie przeglądarki obsługujące ten element, obsługują również model HSL w ramach CSS3.
Tak dla przypomnienia. HSL to przestrzeń barwna, popularna ze względu na prostotę użycia. W odróżnieniu od RGB, łatwo tu zmienić jasność i nasycenie barw. Kiedyś spotkałem się z opinią, że interfejs użytkownika „popełniony” przez programistę bardzo łatwo rozpoznać, ponieważ w rezultacie podawania kolorów oparciu o kody szesnastkowe, wychodzi groch z kapustą. Nie raz przekonałem się o tym na własnej skórze. Nie zawsze chce się uruchamiać dodatkowe narzędzie by wybrać pojedynczy kolor…
Jakie jest rozwiązanie?
Jak zwykle, wystarczy odrobina kodu w Javascript. Opis przestrzeni barw HSL i blsko z nim spokrewionego HSV Można znaleść na Wikipedii. Niestety, przykłady w Sieci posiadały mniejsze lub większe błędy i wymagały gruntownego przepisania.
Na użytek testów, stworzyłem prostą stronkę.
Przy okazji pozwala ono porównać modele HSL i HSV, oraz wybrać wygodniejszy.
Demo najlepiej działa na przeglądarkach opartych o Webkit. Niestety Firefox, wciąż nie obsługuje, elementu <input type="range">, więc jeśli używasz tej przeglądarki będziesz skazany na ręczne wklepywanie wartości numerycznych. Sorry.
Funkcje hsl() i hsv() zwracają w wyniku deklarację barw w formacie zrozumiałym dla CSS i elementu Canvas. Mam nadzieję że dzięki nim brzydkie kolory przejdą do przeszłości.
Etykiety: canvas, css, javascript, R
Red 21:49
Prześlij komentarz