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 , , et d'une couleur, et même mélanger deux ou plusieurs couleurs ensemble. teinte la saturation la luminosité l'opacité Il existe plusieurs fonctions CSS disponibles, examinons-en quelques-unes : - 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 : donne une couleur rouge. rgb() color: rgb(255, 0, 0) - Il est similaire à , mais il vous permet également de définir l'opacité de la couleur. La quatrième valeur, alpha, peut aller de 0 à 1. Exemple : donne une couleur rouge semi-transparente. rgba() rgb() color: rgba(255, 0, 0, 0.5) - Il prend trois valeurs, représentant la teinte, la saturation et la luminosité, et renvoie une couleur. Exemple : donne une couleur rouge. hsl() color: hsl(0, 100%, 50%) - Il est similaire à , mais il vous permet également de définir l'opacité de la couleur. Exemple : donne une couleur rouge semi-transparente. hsla() hsl() color: hsla(0, 100%, 50%, 0.5) - Il vous permet de mélanger deux couleurs ensemble, avec un paramètre de poids facultatif. Exemple : donne une nuance de violet. mix() color: mix(red, blue) 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 , avec des valeurs allant de 0 à 360. couleur elle-même La 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. valeur de teinte La 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. valeur de saturation La dans la fonction HSL représente la luminosité de la couleur, avec des valeurs allant de 0 % à 100 %. Une valeur de luminosité de signifie que la couleur est un , tandis qu'une valeur de signifie que la couleur est et une valeur de signifie que la couleur est . valeur de luminosité 50% gris neutre 100% entièrement claire 0% 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' d'une couleur. opacité Cela peut être utile lorsque vous souhaitez créer un pour vos éléments, par exemple lorsque vous souhaitez qu'une couleur d'arrière-plan soit partiellement transparente. effet translucide 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 , qui représente l'opacité de la couleur et va de 0 à 1. valeur alpha 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 pour vos éléments, par exemple lorsque vous souhaitez qu'une couleur d'arrière-plan soit partiellement transparente. effet translucide 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 et souple. modulaire 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 avec la valeur . --primary-color blue Maintenant, pour utiliser cette propriété personnalisée, vous pouvez utiliser la fonction dans vos sélecteurs CSS. var() button { background-color: var(--primary-color); } Le code ci-dessus définit la couleur d'arrière-plan de tous les éléments sur bleu car nous utilisons la propriété personnalisée . <button> --primary-color Si nous voulons changer la valeur de , nous n'avons besoin de le changer qu'à un seul endroit, et il sera automatiquement mis à jour tout au long du . --primary-color feuille de style Les avantages de l'utilisation des propriétés personnalisées incluent : : 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. Réutilisation du code : 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. Maintenabilité : 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. Flexibilité 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. pour votre site Web, ainsi que assurez-vous que vos couleurs sont lisibles et accessibles à tous les utilisateurs. palette de couleurs 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 et . h1 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 ( et ajouté une transition pour que la couleur change en douceur lorsque le bouton est survolé. hsl(120, 100%, 50%) Nous avons changé la couleur en une teinte bleue ( ) pour l'état de survol. hsl(240, 100%, 50%) 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 !
