Kolory są najważniejszymi elementami używanymi do lepszego wyglądu dla każdej aplikacji lub strony internetowej. Możesz dodać kolory do elementów HTML za pomocą różnych właściwości CSS. W CSS istnieją trzy zaawansowane metody, takie jak RGB, Code i HSL, które można wykorzystać do określania kolorów do elementów HTML.

Ten post poprowadzi Cię o metodach kolorów HSL i HSLA. Więc zanurzmy się!

Jakie są kolory HTML HSL?

Kolory HTML mogą być używane przez określenie odcienia, nasycenia i lekkości za pomocą metody HSL (). Format funkcji, którego używamy do wskazania koloru HSL, jest wspomniany poniżej:

HSL (odcień, nasycenie, lekkość)

Omów je jeden po drugim!

• "odcień”: Odcień jest podstawowym kolorem na kole kolorystycznym. Jest wybierany z koła, określając stopień od 0 do 360 na kole kolorów. Na przykład 0 wskazuje na czerwony, 120 reprezentuje zielony, a 240 wytwarza niebieski kolor.
• "nasycenie”: Intensywność kolorów jest znana jako nasycenie. Jest to wartość procentowa, w której 100% wskazuje na czysty kolor, 50% wskazuje, że kolor ma 50% odcień szarości, a 0% reprezentuje pełny szary, co oznacza, że ​​nie widzimy żadnego koloru.
• "lekkość”: Lekkość pokazuje, ile światła chcemy dodać do koloru. Jest to również wartość procentowa, w której 100% lekkość definiuje biały, 0% definiuje czarny kolor, a 50% określa normalny kolor.

Przykład

W pliku HTML najpierw dodaj Div i dodaj nagłówek i akapit w nim:

Nazwa tematu: Zespół

Jesteśmy drużyną. Pracujemy dla wspólnej misji.

Teraz stygnimy w następujący sposób:

• „„szerokość„Wartość właściwości Div jest ustawiona jako„100%".
• "wysokość" Jak "200px".
• Przypisz „kolor tła„Nieruchomość jako„HSL (233, 63%, 89%)”, Gdzie 233 wskazuje odcień, 63% reprezentuje nasycenie, a 89% reprezentuje lekkość.
• „„rozmiar czcionki„Wartość jest ustalana jako„30px".
• „„tekst-align„Wartość właściwości jest ustalana jako„Centrum".

div
szerokość: 100%;
Wysokość: 200px;
kolor tła: HSL (233, 63%, 89%);
Rozmiar czcionki: 30px;
Text-Align: Center;

Teraz stylizuj

tag, zapewniając mu kolor HSL. Aby zastosować kolor do tekstu, wykorzystamy „kolor„Wartość nieruchomości jako„HSL (273, 99%, 28%)”:

H1
Kolor: HSL (273, 99%, 28%);

Przypiszmy inny kolor HSL do

etykietka. Aby to zrobić, „kolor„Wartość właściwości jest ustalana jako„HSL (12, 94%, 25%)”:

P
Kolor: HSL (12, 94%, 25%);

Oto wynik dodanych kolorów HSL:

Istnieje rozszerzenie metody koloru HSL znanego jako HSLA.

Jakie są kolory HSLA?

Kolory HSLA można zdefiniować jako model kolorów HSLA, ponieważ jest to przedłużenie HSL. Składnia funkcji HSLA () jest podana w następujący sposób:

HSLA (odcień, nasycenie, lekkość, alfa)

Tutaj wartość alfa ma zakres między „0.0" Do "1.0”, Gdzie 0.0 wytwarza w pełni przezroczyste i 1.0 wytwarza w pełni nieprzezroczyste.

Przykład

Weźmy przykład, aby zastosować kolory HSLA do dodanych nagłówków:

HSLA (89, 100%, 64%, 0.5)

HSLA (89, 100%, 64%, 1)

Następnie zastosuj kolory HSLA jako tło do dodanych nagłówków za pomocą „0.5" I "1”Odpowiednio wartości alfa. Zauważ, że wartości innych parametrów są takie same:

.Nagłówek 1
kolor tła: HSLA (89, 100%, 64%, 0.5);

.Heading2
kolor tła: HSLA (89, 100%, 64%, 1);

Poniższy obraz reprezentuje dwa same kolory o różnych wartościach alfa:

Opracowaliśmy niezbędne informacje związane z kolorami HTML HSL i HSLA.

Wniosek

Za pomocą metody HSL () kolory HTML HSL można zastosować, określając wartość odcienia, nasycenia i lekkości. Jednak HSLA jest przedłużeniem HSL z kanałem alfa. Ten model kolorów można zastosować za pomocą funkcji HSLA (). Ten blog wyjaśnił, jakie są kolory HTML HSL i HSLA i jak zastosować je do komponentów HTML.