Comment utiliser la couleur HSL pour vos pages Web HTML5 et CSS3 - pour les nuls

Vous pouvez attribuer une valeur HSL lorsque vous utilisez des couleurs sur votre page Web HTML5 et CSS3. Le code pour HSLcolors montre comment le schéma HSL peut être utilisé sur votre page:

HSLcolors. corps html {background-color: HSL (180, 75%, 75%);} h1 {couleur: HSL (180, 75%, 25%); background-color: HSL (180, 75%, 90%);} p {color: HSL (0, 75%, 25%);}

Ceci est un titre
Ceci est un paragraphe

spécifiez une couleur en utilisant le schéma HSL, faites ceci:

1. Configurez vos sélecteurs comme d'habitude.

   Dans le CSS, configurez un sélecteur pour chaque élément que vous souhaitez colorier.

2. Ajouter la règle de couleur.

   Appliquez un ou les deux à chaque sélecteur.

3. Utilisez la fonction HSL.

   Utiliser HSL suivi de parenthèses indique que vous souhaitez calculer la couleur en utilisant la technique HSL.

4. Indique la teinte.

   Imaginez une roue de couleur rouge en haut. La teinte est l'angle (en degrés) de la couleur que vous voulez choisir. La teinte devrait avoir une valeur comprise entre 0 et 360.

5. Détermine la saturation.

   La saturation est mesurée en pourcentage. La saturation de 0% indique une échelle de gris (quelque part entre le noir et le blanc) tandis que la saturation de 100% est une couleur entièrement saturée sans échelle de gris. Vous devez inclure le signe de pourcentage dans la valeur de saturation.

6. Spécifiez la luminosité.

   La luminosité est également indiquée en pourcentage, 0% étant complètement noir et 100% complètement blanc. Une valeur de luminosité de 50% déterminera une couleur équilibrée entre le blanc et le noir. Les valeurs de luminosité doivent également inclure le signe de pourcentage.

Le modèle HSL est un ajout relativement récent à CSS, il peut donc ne pas fonctionner avec les anciens navigateurs, mais il peut être extrêmement utile. HSL rend plus facile de prédire si les couleurs seront bien ensemble. Si vous gardez deux valeurs HSL identiques et changez la troisième, les deux couleurs vont probablement bien s'emboîter.