Fonctions de couleur CSS en 2023 - Tout ce que vous devez savoir pour commencer

Salut, amis développeurs ! Aujourd'hui, nous allons plonger dans le monde des fonctions de couleur CSS.

Vous avez peut-être utilisé CSS pour changer la couleur d'un élément sur une page Web, mais avez-vous déjà entendu parler des fonctions de couleur CSS ? Sinon, serrez vos ceintures car vous êtes sur le point d'apprendre quelque chose de nouveau et de super utile !

Commençons par une citation que j'ai lue hier sur Bonnes lectures .

La couleur est le clavier, les yeux sont les harmonies, l'âme est le piano à plusieurs cordes. L'artiste est la main qui joue, touchant une touche ou une autre, pour provoquer des vibrations dans l'âme.

Que sont exactement les fonctions de couleur CSS ?

Les fonctions de couleur CSS sont un moyen de spécifier les couleurs dans CSS à l'aide de fonctions mathématiques plutôt qu'un simple code de couleur.

Les fonctions offrent plus de contrôle et de flexibilité sur les couleurs utilisées dans votre feuille de style.

Avec les fonctions de couleur, vous pouvez régler la teinte , la saturation , la luminosité et l'opacité d'une couleur, et même mélanger deux ou plusieurs couleurs ensemble.

Il existe plusieurs fonctions CSS disponibles, examinons-en quelques-unes :

1. rgb() - Il prend trois valeurs, représentant respectivement le rouge, le vert et le bleu, et renvoie une couleur. Les valeurs peuvent aller de 0 à 255. Exemple : color: rgb(255, 0, 0) donne une couleur rouge.

   
   

2. rgba() - Il est similaire à rgb() , mais il vous permet également de définir l'opacité de la couleur. La quatrième valeur, alpha, peut aller de 0 à 1. Exemple : color: rgba(255, 0, 0, 0.5) donne une couleur rouge semi-transparente.

   
   

3. hsl() - Il prend trois valeurs, représentant la teinte, la saturation et la luminosité, et renvoie une couleur. Exemple : color: hsl(0, 100%, 50%) donne une couleur rouge.

   
   

4. hsla() - Il est similaire à hsl() , mais il vous permet également de définir l'opacité de la couleur. Exemple : color: hsla(0, 100%, 50%, 0.5) donne une couleur rouge semi-transparente.

   
   

5. mix() - Il vous permet de mélanger deux couleurs ensemble, avec un paramètre de poids facultatif. Exemple : color: mix(red, blue) donne une nuance de violet.

Découvrons-les en détail.

RVB()

Très bien, continuons notre voyage dans le monde des fonctions de couleur CSS et plongeons dans la fonction RVB. La fonction RVB est l'une des fonctions de couleur les plus utilisées en CSS, et pour cause !

Il est facile à comprendre et vous donne beaucoup de contrôle sur les couleurs que vous utilisez sur votre site Web.

La fonction RVB prend trois valeurs, chacune représentant l'intensité de

• rouge,

• vert, et

• bleu respectivement.

Ces valeurs peuvent aller de 0 à 255. En mélangeant différentes intensités de rouge, de vert et de bleu, vous pouvez créer la couleur de votre choix.

Exemple:

• Pour la couleur rouge - rgb(255, 0, 0)

• Pour la couleur verte - rgb(0, 255, 0)

• Pour la couleur bleue - rgb(0, 0, 255)

  
  

 div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/

HSL()

Très bien, passons à une autre fonction de couleur utile dans CSS - la fonction HSL !

La fonction HSL est similaire à la fonction RVB, mais au lieu d'utiliser des valeurs pour le rouge, le vert et le bleu, elle utilise des valeurs pour :

• teinte,

• saturation, et

• légèreté.

  
  

  Cela le rend un peu plus facile à comprendre et à utiliser, en particulier pour ceux qui découvrent théorie des couleurs .

  
  

La valeur de teinte dans la fonction HSL représente la couleur elle-même , avec des valeurs allant de 0 à 360.

• La valeur de teinte de 0 représente le rouge, une valeur de teinte de 120 représente le vert et une valeur de teinte de 240 représente le bleu.

  
  

• La valeur de saturation dans la fonction HSL représente l'intensité de la couleur, avec des valeurs allant de 0 % à 100 %. Une valeur de saturation de 100 % signifie que la couleur est entièrement saturée, tandis qu'une valeur de 0 % signifie que la couleur est grise.

  
  

• La valeur de luminosité dans la fonction HSL représente la luminosité de la couleur, avec des valeurs allant de 0 % à 100 %. Une valeur de luminosité de 50% signifie que la couleur est un gris neutre , tandis qu'une valeur de 100% signifie que la couleur est entièrement claire et une valeur de 0% signifie que la couleur est entièrement sombre .

  
  

 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */

RVB()

Très bien, parlons de la fonction RGBA !

La fonction RGBA est identique à la fonction RGB mais avec un bonus supplémentaire :

• il permet de spécifier l' opacité d'une couleur.

Cela peut être utile lorsque vous souhaitez créer un effet translucide pour vos éléments, par exemple lorsque vous souhaitez qu'une couleur d'arrière-plan soit partiellement transparente.

La fonction RGBA prend quatre valeurs, les trois premières étant les valeurs rouge, verte et bleue, tout comme la fonction RGB.

La quatrième valeur est la valeur alpha , qui représente l'opacité de la couleur et va de 0 à 1.

Une valeur de 0 signifie que la couleur est entièrement transparente, tandis qu'une valeur de 1 signifie que la couleur est entièrement opaque.

 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

HSLA()

Très bien, parlons de la fonction HSLA !

La fonction HSLA ressemble à la fonction HSL, mais avec un avantage supplémentaire : elle vous permet de spécifier l'opacité d'une couleur.

Cela peut être utile lorsque vous souhaitez créer un effet translucide pour vos éléments, par exemple lorsque vous souhaitez qu'une couleur d'arrière-plan soit partiellement transparente.

La fonction HSLA prend quatre valeurs, les trois premières étant les valeurs de teinte, de saturation et de luminosité, tout comme la fonction HSL.

La quatrième valeur est la valeur alpha, qui représente l'opacité de la couleur et va de 0 à 1.

Une valeur de 0 signifie que la couleur est entièrement transparente, tandis qu'une valeur de 1 signifie que la couleur est entièrement opaque.

 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

C'est tout de même A signifie Alpha qui est nous (valeur alpha de 0,75)ed pour l'effet translucide dans les deux fonctions, simple.

Propriétés personnalisées ou variables CSS

Parlons maintenant des propriétés personnalisées en CSS, également appelées variables CSS. Les propriétés personnalisées vous permettent de stocker des valeurs que vous pouvez réutiliser dans votre feuille de style, ce qui facilite la maintenance de vos styles et rend votre code plus modulaire et souple.

Pour créer une propriété personnalisée, il vous suffit d'utiliser la syntaxe -- suivie du nom de la propriété, suivi d'une valeur

 :root { --primary-color: blue; }

Ici, nous avons créé une propriété personnalisée appelée --primary-color avec la valeur blue .

Maintenant, pour utiliser cette propriété personnalisée, vous pouvez utiliser la fonction var() dans vos sélecteurs CSS.

 button { background-color: var(--primary-color); }

Le code ci-dessus définit la couleur d'arrière-plan de tous les éléments <button> sur bleu car nous utilisons la propriété personnalisée --primary-color .

Si nous voulons changer la valeur de --primary-color , nous n'avons besoin de le changer qu'à un seul endroit, et il sera automatiquement mis à jour tout au long du feuille de style .

Les avantages de l'utilisation des propriétés personnalisées incluent :

• Réutilisation du code : au lieu de répéter des valeurs dans votre feuille de style, vous pouvez stocker des valeurs dans des propriétés personnalisées et les réutiliser selon vos besoins.

• Maintenabilité : les propriétés personnalisées facilitent la maintenance de vos styles car vous n'avez besoin de mettre à jour les valeurs qu'à un seul endroit.

• Flexibilité : Les propriétés personnalisées vous permettent de modifier l'apparence de votre site en modifiant les valeurs à un seul endroit au lieu d'effectuer des modifications dans plusieurs sélecteurs.

Meilleures pratiques des fonctions de couleur CSS

Très bien, parlons des meilleures pratiques pour utiliser les fonctions de couleur CSS dans vos projets.

Ces conseils vous aideront à créer une image cohérente et visuellement attrayante. palette de couleurs pour votre site Web, ainsi que assurez-vous que vos couleurs sont lisibles et accessibles à tous les utilisateurs.

Création d'une palette de couleurs pour votre site Web :

L'une des premières choses à faire lorsque vous travaillez avec des couleurs CSS est de créer une palette de couleurs pour votre site Web. Cela peut être aussi simple que de choisir quelques couleurs que vous aimez et qui vont bien ensemble.

Vous pouvez utiliser les fonctions RVB, HSL, RVBA ou HSLA pour définir vos couleurs.

Un bon point de départ consiste à choisir une couleur principale, puis à choisir 2 ou 3 couleurs d'accent pour la compléter.

 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); }

Utilisation des fonctions de couleur CSS pour le contraste et la hiérarchie :

Il est important d'utiliser la couleur pour créer un contraste et une hiérarchie dans vos conceptions. Par exemple, vous pouvez utiliser une couleur plus claire pour votre arrière-plan et une couleur plus foncée pour votre texte afin de vous assurer qu'il est facilement lisible.

Vous pouvez également utiliser la couleur pour attirer l'attention sur des éléments spécifiques, tels que des boutons ou des liens.

 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); }

Test des fonctions de couleur pour la lisibilité et l'accessibilité :

Enfin, il est important de tester la lisibilité et l'accessibilité de vos couleurs. Assurez-vous que vos couleurs ont suffisamment de contraste pour être facilement lisibles, en particulier pour les utilisateurs souffrant de troubles de la vision des couleurs.

Vous pouvez utiliser des outils en ligne pour vérifier le contraste de vos couleurs et vous assurer qu'elles respectent les normes d'accessibilité.

• Vérificateur de contraste WebAIM

• Générateur de palette de couleurs Muzli

• Experte - Contrôleur de contraste

• refroidisseurs - Générateur de palettes

• Générateur de palette Canva

Fonctions de couleur CSS Techniques avancées

Dans cette section, nous plongerons dans certaines techniques avancées avec des fonctions de couleur CSS.

Utilisation de variables CSS pour les schémas de couleurs dynamiques

Avez-vous déjà voulu changer la palette de couleurs de votre site Web avec seulement quelques lignes de code ? Avec les variables CSS, également appelées propriétés personnalisées, c'est possible !

Vous pouvez créer un ensemble de variables pour stocker votre palette de couleurs, puis les utiliser dans votre feuille de style.

De cette façon, si jamais vous souhaitez modifier votre jeu de couleurs, vous n'avez qu'à mettre à jour les valeurs de vos variables.

 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); }

Dans cet exemple, nous avons créé deux propriétés personnalisées pour nos couleurs primaires et secondaires. Nous les avons ensuite utilisés pour styliser nos éléments h1 et button .

Création d'animations avec des fonctions de couleur CSS

L'une des choses intéressantes que vous pouvez faire avec les fonctions de couleur CSS est de les animer ! Vous pouvez créer des transitions fluides entre les couleurs pour ajouter du dynamisme à votre site Web. Par exemple, vous pouvez faire en sorte qu'un bouton change de couleur lorsqu'un utilisateur le survole.

 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); }

Ici, nous avons défini la couleur d'arrière-plan par défaut de notre bouton sur une teinte verte ( hsl(120, 100%, 50%) et ajouté une transition pour que la couleur change en douceur lorsque le bouton est survolé.

Nous avons changé la couleur en une teinte bleue ( hsl(240, 100%, 50%) ) pour l'état de survol.

Utilisation des fonctions de couleur CSS pour les dégradés et la transparence

Une autre chose amusante que vous pouvez faire avec les fonctions de couleur CSS est la création de dégradés et de transparence. Vous pouvez utiliser les fonctions de couleur RGBA et HSLA pour créer des couleurs semi-transparentes, puis les combiner pour créer des dégradés.

 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); }

Ici, nous avons créé un dégradé linéaire qui va d'une couleur rouge RGBA à une couleur verte HSLA. Les deux couleurs ont une valeur alpha de 0,5, ce qui les rend semi-transparentes.

Et voila!

Quelques techniques avancées avec des fonctions de couleur CSS. Amusez-vous à expérimenter ces techniques et laissez libre cours à votre créativité !

Ressources

• caniuse.com [Tableaux de support pour HTML5, CSS3]

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Conclusion

En conclusion, j'espère que cette introduction vous a été utile pour vous familiariser avec les fonctions de couleur CSS et les propriétés personnalisées.

Ce sont des outils puissants qui peuvent rendre votre code CSS plus flexible, maintenable et plus facile à utiliser. Bon codage !