Farger er de viktigste komponentene som brukes til å gi et bedre utseende på alle applikasjoner eller nettsteder. Du kan legge til farger i HTML -elementene ved hjelp av forskjellige CSS -egenskaper. I CSS er det tre avanserte metoder, for eksempel RGB, HEX -kode og HSL, som kan brukes til å spesifisere farger til HTML -elementer.

Dette innlegget vil guide deg om HSL- og HSLA -fargemetodene. Så la oss dykke inn!

Hva er HTML HSL -farger?

HTML -fargene kan brukes ved å spesifisere fargetone, metning og letthet ved bruk av HSL () -metoden. Funksjonsformatet vi bruker for å indikere HSL -fargen er nevnt nedenfor:

HSL (fargetone, metning, letthet)

La oss diskutere dem en etter en!

• “fargetone”: Hue er grunnfargen på fargehjulet. Det er valgt fra hjulet ved å spesifisere graden fra 0 til 360 på fargehjulet. For eksempel indikerer 0 rød, 120 representerer grønn og 240 produserer den blå fargen.
• “Metning”: Fargeintensiteten er kjent som metning. Det er den prosentvise verdien der 100% indikerer den rene fargen, 50% indikerer at fargen har en 50% grå nyanse, og 0% representerer full grå, noe som betyr at vi ikke kan se noen farge.
• “letthet”: Letthet viser hvor mye lys vi vil legge til fargen. Det er også en prosentvis verdi der 100% letthet definerer hvit, 0% definerer svart farge og 50% definerer normal farge.

Eksempel

I HTML -filen, først, legg til en div og legg til en overskrift, og et avsnitt i den:

Emnetavn: Team

Vi er et team. Vi jobber for et felles oppdrag.

Nå vil vi style på følgende måte:

• “bredde”Eiendomsverdien til div er satt som“100%”.
• “høyde" som "200px”.
• Tilordne “bakgrunnsfarge”Eiendom som“HSL (233, 63%, 89%)”, Der 233 indikerer fargetone, 63% representerer metning og 89% representerer lyshet.
• “skriftstørrelse”Verdien er satt som“30px”.
• “Tekstalign”Eiendomsverdien er satt som“senter”.

div
Bredde: 100%;
Høyde: 200px;
bakgrunnsfarge: HSL (233, 63%, 89%);
Font-størrelse: 30px;
tekst-align: sentrum;

Nå, stil

Tag ved å gi HSL -farge til den. For å bruke farge på teksten, bruker vi “farge”Eiendomsverdi som“HSL (273, 99%, 28%)”:

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

La oss tildele en annen HSL -farge til

stikkord. For å gjøre det, “farge”Eiendomsverdien er satt som“HSL (12, 94%, 25%)”:

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

Her er et resultat av de ekstra HSL -fargene:

Det er en utvidelse av HSL -fargemetoden kjent som HSLA.

Hva er HSLA -farger?

HSLA -fargene kan defineres som HSLA -fargemodellen, ettersom det er en utvidelse av HSL. Syntaksen til HSLA () -funksjonen er gitt som følger:

HSLA (fargetone, metning, letthet, alfa)

Her har alfaverdien et område mellom "0.0" til "1.0”, Hvor 0.0 produserer fullt gjennomsiktig, og 1.0 produserer fullt ugjennomsiktig.

Eksempel

La oss ta et eksempel for å bruke HSLA -farger på de ekstra overskriftene:

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

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

Deretter bruker du HSLA -fargene som bakgrunn på de ekstra overskriftene med "0.5”Og“1Henholdsvis alfaverdier. Merk at verdiene til de andre parametrene er de samme:

.overskrift1
Bakgrunnsfarge: HSLA (89, 100%, 64%, 0.5);

.heading2
Bakgrunnsfarge: HSLA (89, 100%, 64%, 1);

Bildet nedenfor representerer de to samme fargene med forskjellige alfaverdier:

Vi har samlet den essensielle informasjonen relatert til HTML HSL- og HSLA -farger.

Konklusjon

Ved hjelp av HSL () -metoden kan HTML HSL -fargene brukes ved å spesifisere verdien av fargetone, metning og lyshet. Imidlertid er HSLA en forlengelse av HSL med alfa -kanalen. Denne fargemodellen kan brukes ved hjelp av HSLA () -funksjonen. Denne bloggen forklarte hva HTML HSL- og HSLA -farger er og hvordan du bruker dem på HTML -komponentene.