Explorer les couleurs dans CSS

<p> Couleurs de maîtrise CSS: un guide complet

<p> Dans la leçon précédente, nous avons exploré les sélecteurs CSS. Maintenant, construisons ces connaissances en apprenant à manipuler l'apparence d'éléments sélectionnés, en commençant par la modification des couleurs. Ce guide couvre diverses méthodes pour définir les couleurs dans CSS, y compris les noms de couleurs, les codes hexagonaux, les valeurs RVB et les formats HSL.

<p> Comme indiqué précédemment, après avoir sélectionné un élément HTML (par exemple, un paragraphe <p>), vous pouvez modifier sa couleur de texte à l'aide de la propriété color:

<code class="language-css">p {
  color: red;
}</code>

<p> De même, la propriété background-color modifie l'arrière-plan de l'élément:

<code class="language-css">p {
  background-color: darkorange;
}</code>

<p> Bien que CSS prenne en charge les noms de couleurs communs comme "rouge" et "darkorange", il n'engose ​​pas toutes les teintes possibles. Pour un contrôle précis des couleurs, les modèles de couleurs RVB, Hex et HSL offrent une plus grande flexibilité.

RVB Color Model

<p> RVB (rouge, vert, bleu) forme la base de la représentation des couleurs dans les systèmes informatiques. Le mélange de ces trois couleurs primaires génère un large éventail de teintes. La fonction rgb() définit les couleurs RVB:

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

<p> Chaque paramètre (red, green, blue) accepte une valeur entière entre 0 et 255, représentant l'intensité de chaque composant de couleur. 0 indique l'intensité la plus faible et 255 la plus forte. Par exemple:

<code class="language-css">p {
  color: rgb(255, 0, 0); /* Equivalent to color: red; */
}</code>

<p> combiner différentes intensités crée des couleurs diverses:

<code class="language-css">p {
  color: rgb(168, 189, 45);
}</code>

<p> Un outil de sélecteur de couleurs est fortement recommandé pour sélectionner les valeurs RVB visuellement, car il est difficile de prédire la couleur résultante à partir des valeurs numériques seules.

<p>

<p> La fonction rgba() étend rgb() en ajoutant un canal alpha:

<code class="language-css">rgba(<red>, <green>, <blue>, <alpha>)</code>

<p> Le paramètre alpha (0,0 à 1,0) contrôle la transparence; 0.0 est entièrement transparent et 1.0 est entièrement opaque:

<code class="language-css">p {
  color: rgba(167, 189, 45, 0.408);
}</code>

<p>

Modèle de couleur hexagonale

<p> Les couleurs hexagonales utilisent la notation hexadécimale:

<code class="language-css">#rrggbb</code>

<p> Le symbole # précède le code hexadécimal à six chiffres. Chaque paire (rr, gg, bb) représente respectivement les composantes rouges, vertes et bleues, allant de 00 (0 décimal) à FF (255 décimales). Par exemple:

<code class="language-css">p {
  color: #ff0000; /* Equivalent to color: rgb(255, 0, 0); and color: red; */
}</code>

<p> La transparence peut être ajoutée en utilisant des codes hexadécimaux à huit chiffres:

<code class="language-css">#rrggbbaa</code>

<p> aa représente le canal alpha (00 à ff, cartographier à 0,0 à 1,0).

<code class="language-css">p {
  color: #a7bd2d68;
}</code>

<p> Cela équivaut à rgba(167, 189, 45, 0.408).

<p>

HSL Color Model

<p> HSL (teinte, saturation, légèreté) est un modèle de couleur familier aux graphistes. La fonction hsl() utilise:

<code class="language-css">p {
  color: red;
}</code>

<p> hue représente la position de la couleur sur la roue chromatique (0 à 360 degrés).

<p>

<p> saturation (0% à 100%) indique l'intensité de la couleur (0% est gris, 100% est en pleine couleur).

<p>

<p> lightness (0% à 100%) détermine la quantité de noir ou blanc ajouté (0% est noir, 100% est blanc).

<p>

<p> hsla() Ajoute un canal alpha pour la transparence:

<code class="language-css">p {
  background-color: darkorange;
}</code>

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

<p> Cela équivaut à #a7bd2d68 et rgba(167, 189, 45, 0.408).

Exploration supplémentaire

• Création de dispositions multi-colonnes avec CSS
• Mastering CSS Grid Disposouts
• Construire des dispositions flexibles avec CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!