HSL na HEX

Porównaj HSL z HEX

CSS 3 wprowadza inny sposób definiowania koloru za pomocą HSL (z angielskiego. Barwa, Nasycenie, Jasność). to model, w którym kolor określają trzy parametry: odcień, nasycenie i jasność. Przyjrzyjmy się każdemu parametrowi osobno. Kluczową zaletą HSL jest możliwość niezależnego określenia charakterystyk kolorów. Otwiera to przed Tobą ogromne możliwości. Możesz łatwo rozjaśnić, przyciemnić, nasycić lub zmniejszyć nasycenie koloru. I zachowując swój cień. Lub odwrotnie - zmieniaj barwy bez zmiany ich nasycenia lub jasności. Często do korzystania z takich funkcji są używane preprocesory, ale bez nich jest to możliwe. Funkcja hsl () służy do określania kolorów HSL. Funkcja przyjmuje trzy wartości oddzielone przecinkiem: Barwa, Nasycenie i Jasność. Zmieniając wartości nasycenia i jasności, można uzyskać sąsiednie odcienie dla określonego koloru.

W większości przypadków można rozpoznać kolor po kodzie szesnastkowym, biorąc pod uwagę tylko pierwsze cyfry par. W poniższym przykładzie widać wyraźnie, że kolor jest zmieszany z dużą ilością czerwieni, odrobiną niebieskiego i wcale nie jest zielony. Zrozumienie koloru za pomocą kodu szesnastkowego pozwala projektantowi stron internetowych szybciej poruszać się po kodzie strony, a poza tym zawsze możesz zaimponować współpracownikom lub klientom, mówiąc: Ach, jaki wspaniały odcień burgunda. Możesz również łatwo zmienić jasność, odcień lub nasycenie koloru, edytując tylko jego kod szesnastkowy. W pierwszym przykładzie poniżej jedna z par zmienia się w krokach co 10%, podczas gdy jasność kolorów wzrasta. W drugim przykładzie jasność rośnie, ale nasycenie spada. Wartości RGB można również określić za pomocą szesnastkowych (HEX) wartości kolorów w postaci: #RRGGBB, gdzie RR (czerwony), GG (zielony) i BB (niebieski) to wartości szesnastkowe od 00 do FF (to samo co dziesiętne 0- 255). System szesnastkowy, w przeciwieństwie do systemu dziesiętnego, opiera się, jak sama nazwa wskazuje, na liczbie 16.