Slik bruker du HSL-farge for HTML5- og CSS3-baserte websider - dummies

Du kan tildele en HSL-verdi uansett hvor du bruker farger på HTML5 og CSS3 websiden. Koden for HSLcolors viser hvordan HSL-ordningen kan brukes på siden din:

HSLcolors. html kropp {bakgrunnsfarge: HSL (180, 75%, 75%);} h1 {farge: HSL (180, 75%, 25%); bakgrunnsfarge: HSL (180, 75%, 90%);} p {farge: HSL (0, 75%, 25%);}

Dette er en overskrift
Dette er et avsnitt

Til spesifiser en farge ved hjelp av HSL-ordningen, gjør dette:

1. Sett opp dine selgere som vanlig.

   I CSS, sett opp en velger for hvert element du ønsker å farge.

2. Legg til fargeregelen.

   Bruk en eller begge til hver velger.

3. Bruk HSL-funksjonen.

   Bruk av HSL etterfulgt av parentes indikerer at du ønsker å beregne fargen ved hjelp av HSL-teknikken.

4. Angi fargen.

   Forestill deg et fargeskjul med rødt på toppen. Fargetonen er vinkelen (i grader) av fargen du vil velge. Fargetone skal ha en verdi mellom 0 og 360.

5. Bestem metningen.

   Metning er målt i prosent. Metning av 0% indikerer en gråtoner (et sted mellom svart og hvitt) mens Metning av 100% er en fullstendig mettet farge uten gråtoner. Du må inkludere prosent-tegnet som en del av metningsverdien.

6. Angi lysstyrken.

   Lysstyrke er også angitt i prosent, med 0% helt svart og 100% helt hvit. En lysverdien på 50% bestemmer en balansert farge mellom hvitt og svart. Lyshetsverdier bør også inkludere prosenttegnet.

HSL-modellen er et relativt nylig tillegg til CSS, så det kan ikke fungere med eldre nettlesere, men det kan være svært nyttig. HSL gjør det lettere å forutsi om farger vil se bra ut sammen. Hvis du holder to av HSL-verdiene de samme og endrer den tredje, vil de to fargene sannsynligvis passe sammen godt.