Comment utiliser la couleur de HSL pour votre HTML5 et CSS3 pages Web en fonction

Vous pouvez attribuer une valeur HSL où vous utilisez des couleurs sur votre page web HTML5 et CSS3. Le code pour HSLcolors montre comment le régime de HSL peut être utilisé sur votre page:

HSLcolors.html

Ceci est un titre

Ceci est un paragraphe

Pour spécifier une couleur en utilisant le schéma de HSL, faites ceci:

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

    Dans le CSS, mis en place un sélecteur pour chaque élément que vous souhaitez à la couleur.




  2. Ajouter la règle de couleur.

    Appliquer une ou les deux pour chaque sélecteur.

  3. Utilisez la fonction de HSL.

    Utilisation HSL suivie par des parenthèses indique que vous souhaitez calculer la couleur en utilisant la technique de la LGV.

  4. Indiquer la teinte.

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

  5. Déterminer la saturation.

    La saturation est mesurée en tant que pourcentage. La saturation de 0% indique une échelle de gris (quelque part entre noir et blanc), tandis que la saturation de 100% est une couleur totalement saturée sans niveaux de gris. Vous devez inclure le signe pour cent dans le cadre de la valeur de saturation.

  6. Spécifiez la légèreté.

    Légèreté est également indiqué en pourcentage, 0% étant complètement noir et 100% étant complètement blanc. Une valeur de luminosité de 50% permettra de déterminer une couleur équilibrée entre blanc et noir. Valeurs de luminosité devraient également inclure le signe pour cent.

Le modèle HSL est un ajout relativement récent au CSS, il peut ne pas fonctionner avec les anciens navigateurs, mais il peut être extrêmement utile. LGV rend plus facile de prédire si les couleurs vont bien ensemble. Si vous continuez à deux de la LGV les mêmes valeurs et de modifier le troisième, les deux couleurs sont susceptibles de correspondre très bien ensemble.


» » » » Comment utiliser la couleur de HSL pour votre HTML5 et CSS3 pages Web en fonction