Un guide des fonctions de couleur CSS

Hé, chers 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 GoodReads :

« 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 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 :

• rgb(): 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.
• rgba(): Est similaire à rgb(), mais vous permet également de définir l’opacité de la couleur. La quatrième valeur, alpha, peut être comprise entre 0 et 1. Exemple : color: rgba(255, 0, 0, 0.5) donne une couleur rouge semi-transparente.
• hsl(): 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.
• hsla(): Est similaire à hsl(), mais 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.
• mix() : Permet de mélanger deux couleurs ensemble, avec un paramètre de poids optionnel. Exemple: color: mix(red, blue) donne une nuance de violet.

Découvrons-les en détail.

RVB()

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 couramment utilisées dans 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 :

1. Rouge
2. Vert
3. Bleu

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.

Par exemple:

• Pour le rouge: rgb(255, 0, 0)
• Pour le vert: rgb(0, 255, 0)
• Pour le bleu: rgb(0, 0, 255)

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

HSL()

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 :

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

La valeur de teinte dans la fonction HSL représente la se coloreravec des valeurs comprises entre 0 et 360 :

• Le 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.
• Le 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.
• Le 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 neutrealors qu’une valeur de 100% signifie que la couleur est entièrement léger, 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()

Parlons maintenant de la fonction RGBA.

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

1. Il vous permet de spécifier le 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 :

1. Rouge
2. Vert
3. Bleu
4. Alpha

Les trois premières valeurs sont identiques aux valeurs de la fonction RVB. Le valeur alpha 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()

Parlons maintenant de la fonction HSLA.

La fonction HSLA est identique à la fonction HSL, mais avec un bonus supplémentaire :

1. 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 HSLA prend quatre valeurs :

1. Teinte
2. Saturation
3. Légèreté
4. Valeur alpha

Les trois premières valeurs sont identiques aux valeurs de la fonction HSL. Le valeur alpha 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 la même chose, ce qui signifie que A signifie Alpha (valeur alpha de 0,75) qui est utilisé pour l’effet translucide dans les deux fonctions.

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 flexible.

Pour créer une propriété personnalisée, il vous suffit d’utiliser le -- 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 de blue.

Maintenant, pour utiliser cette propriété personnalisée, vous pouvez utiliser le var() fonction 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 <button> éléments en bleu car nous utilisons la propriété personnalisée --primary-color.

Si nous voulons changer la valeur de --primary-colornous devons le modifier en un seul endroit, et il sera automatiquement mis à jour dans toute la 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 gestion de vos styles, car vous devez mettre à jour les valeurs à un seul endroit.
• La 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

Parlons de quelques bonnes pratiques pour utiliser les fonctions de couleur CSS dans vos projets. Ces conseils vous aideront à créer une palette de couleurs cohérente et visuellement attrayante pour votre site Web, ainsi qu’à vous assurer que vos couleurs sont lisibles et accessibles à tous les utilisateurs.

Créer 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é.

Fonctions de couleur CSS Techniques avancées

Dans cette section, nous allons plonger dans certaines techniques avancées avec les 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, vous le pouvez. 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 h1 et button éléments.

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%);
}