Bases de Couleur CSS

Utilisation de la couleur en CSS (feuilles de style en cascade court pour) est en fait assez facile. Dans ce tutoriel, nous allons vous montrer comment utiliser tous les formats de couleurs en CSS, y compris les codes hexadécimaux de couleurs, des noms de couleur HTML, et les valeurs RGB et TSL. Si vous êtes nouveau au CSS, juste Google intro de CSS, il ya beaucoup de grands tutoriels là-bas.

Comment utiliser des codes couleur Hex en CSS

Codes de couleur Hex sont la méthode la plus commune d'ajouter de la couleur à un élément HTML en utilisant CSS. Dans votre feuille de style, vous pouvez utiliser la propriété de couleur CSS pour changer la couleur par défaut du texte de votre site Web.

CSS
/* In your .css stylesheet */
body { color: #FF0000; }

Une deuxième option consiste à inclure les styles CSS droit dans le <head> de votre document HTML en utilisant balises <style> comme ci-dessous:

HTML
<!-- In your HTML document -->
<head>
  <style>
    body { color: #FF0000; }
  </style>
</head>

Facile, non? Vous pouvez utiliser la propriété de couleur CSS avec un code Hex sur à peu près n'importe quel élément HTML, la balise <body> est qu'un exemple. Devenir fou!

Comment utiliser HTML colorie des noms dans CSS

Noms de couleur HTML sont un autre moyen pour coiffer votre contenu en CSS et peuvent souvent être plus faciles à comprendre. Vous pouvez utiliser un nom de couleur de la même manière comme un code de couleur hexadécimal, en lui affectant comme valeur pour la propriété color CSS dans votre feuille de style.

CSS
/* In your .css stylesheet */
body { color: red; }

Actuellement 140 noms de couleur sont pris en charge dans tous les navigateurs modernes, et nous avons rassemblé une belle liste d'eux tout est là ici une référence rapide.

Comment utiliser les valeurs des couleurs RGB en CSS

RGB, qui se tient pour Rouge, Vert et Bleu, est un système de couleurs trouve couramment dans de nombreuses applications et technologies de conception, et plus récemment est devenu un go-to pour les concepteurs Web et les programmeurs de même. En CSS, les couleurs RGB peuvent être utilisés en enveloppant les valeurs entre parenthèses et les faisant précéder par une minuscule 'rgb'.

CSS
/* In your .css stylesheet */
body { color: rgb(255, 0, 0); }

Un des avantages de l'utilisation RGB dans votre CSS est la capacité de contrôler l'opacité, en plus de la couleur. Ajout d'un «a» au préfixe rgb() permet une quatrième valeur à attribuer qui détermine la transparence de la couleur sur une échelle de 0 à 1. Dans cet exemple, la page HTML texte rendrait opacité de 50% depuis le 0,5 est à mi-chemin entre 0 et 1.

CSS
/* In your .css stylesheet */
body { color: rgba(255, 0, 0, 0.5); }

Si vous souhaitez utiliser RGB, mais ne savez pas où commencer, consultez notre sélecteur de couleur pour générer rapidement des codes de couleur.

Comment utiliser des valeurs de couleur HSL en CSS

Vous avez peut être entendu parler de HSL, qui se tient pour Hue, saturation et luminosité, un autre système de couleur utilisé dans de nombreuses applications. La teinte est mesurée en degrés de 0 – 360, tout en saturation et luminosité utilisent une échelle de 0% – 100%. En CSS, HSL peut être facilement mis en œuvre suivant une syntaxe similaire à RGB, mais plutôt avec le préfixe 'hsl'.

CSS
/* In your .css stylesheet */
body { color: hsl(0, 100%, 50%); }

De même, HSL prend également en charge un canal alpha pour commander la transparence de la couleur. Son utilisation est identique à RGB, avec une quatrième valeur entre 0 et 1 permis en utilisant le préfixe 'hsla'.

CSS
/* In your .css stylesheet */
body { color: hsla(0, 100%, 50%, 0.5); }

Remarque, rgba(), hsl() et hsla() sont relativement nouveaux ajouts à CSS, et ne sont pas pris en charge par certains navigateurs plus anciens. Selon votre situation, vous pouvez sélectionner différentes méthodes pour manipuler l'opacité de vos couleurs.