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

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: , , ,

Red 21:49

Komentarze

Prześlij komentarz

Odnośniki

Utwórz link

Archiwum

Subskrybuj

RSS / Atom