Fondamentaux CSS : Travailler avec les couleurs

De nombreux facteurs doivent être pris en compte lors de la conception d’un site Web ; police, flux UX et bien plus encore. Un élément de conception très important est la couleur. Même des décisions simples comme la couleur de la marque, la couleur de la bordure et la couleur de l’arrière-plan ont un impact certain et perceptible.

Dans cet article, nous aborderons les principes fondamentaux des couleurs CSS et apprendrons comment transformer un site HTML en un site Web impeccable.

Premiers pas avec les couleurs CSS

Il existe une certaine façon de décrire les couleurs en CSS qu’un ordinateur peut comprendre. Cela se fait généralement en divisant la couleur en divers composants, en calculant un ensemble mixte de couleurs primaires pour former la couleur souhaitée. Il existe plusieurs façons de décrire une couleur en CSS.

Utiliser des noms de couleurs comme mots-clés

Il existe environ 140 noms de couleurs CSS pris en charge par la plupart des navigateurs modernes. Cela pourrait être aussi simple que rouge ou cyan pour le mot-clé couleur. Bien que cela aide avec une gamme modérée de couleurs, vous êtes limité à quelques couleurs définies sans aucun contrôle sur les nuances et les teintes. C’est là que vous devrez passer à la gamme supérieure d’options de couleur CSS.

/*Syntax*/
color: red;
color: crimson;
color: slateblue;

Utilisation des valeurs RVB

Lors de la conception d’un site Web ou d’une application, le Schéma de couleur importe beaucoup, ce ne devrait certainement pas être la dernière chose à laquelle vous pensez. En CSS, vous pouvez utiliser trois méthodes pour représenter une couleur RVB. Il s’agit de la notation de chaîne hexadécimale, de la notation fonctionnelle RVB et de la notation fonctionnelle HSL. Voici de plus près chacun d’eux.

Notation de chaîne hexadécimale

La notation de chaîne hexadécimale commence toujours par le caractère #. Après ce caractère, vous spécifiez les couleurs à l’aide de chiffres hexadécimaux d’un code de couleur spécifique. La chaîne n’est pas sensible à la casse, mais il est classique d’utiliser des minuscules. Voici quelques cas d’utilisation :

#rrggbb

C’est la façon la plus courante de décrire une couleur numérique. C’est une couleur entièrement opaque avec des composants rouges, verts et bleus comme 0xrr, 0xgg, et 0xbb respectivement.

#rrggbbaa

Il suit les critères RVB décrits ci-dessus avec un canal alpha qui gère la transparence de la couleur. Plus le 0xaa valeur est, plus la couleur devient translucide.

#rgb

Si tu as de la couleur #556677, vous pouvez simplement l’écrire comme #567 puisqu’il représente 0xrr, 0xgg, et 0xbb respectivement. Par exemple, #000 (ou #000000) est noir tandis que #fff (ou #ffffff) est blanc.

#rgba

Il suit les critères ci-dessus avec un canal alpha spécifié par 0xaa pour contrôler l’opacité.

Notation fonctionnelle RVB

La notation fonctionnelle RVB représente les couleurs à l’aide de composants rouges, verts et bleus. Il est défini à l’aide de la fonction rgb() qui accepte les paramètres d’entrée sous la forme de composants primaires rouge, vert et bleu (et un canal alpha en option). Les valeurs rouge, verte et bleue doivent être un nombre entier compris entre 0 à 255 (inclus), soit un pourcentage variant de 0% à 100%. D’autre part, le canal alpha accepte des valeurs de 0.0 (complètement transparent) à 1.0 (complètement opaque). Il accepte également une valeur en pourcentage de 0% (identique à 0.0) et 100% (identique à 1.0).

/*Syntax*/
color: rgb(rr,gg,bb);
color: rgba(rr,gg,bb,a);

Notation fonctionnelle HSL

La notation fonctionnelle HSL représente la couleur en utilisant la teinte, la saturation et la luminosité. C’est très similaire au RVB() fonction en termes d’utilisation. Vous pouvez facilement trouver la valeur hexadécimale de n’importe quelle couleur sur votre écran d’ordinateur. Dans cette méthode de couleur, la teinte définit la couleur réelle en fonction de la position sur la roue chromatique. La saturation est le pourcentage de gris avec la teinte maximale possible. La luminosité fait passer la couleur de son apparence la plus sombre à la plus brillante possible à mesure qu’elle augmente.

La valeur de teinte (H) est spécifiée par l’unité d’angle prise en charge dans CSS. Il comprend degrés, rad, diplômé, et tourner. La saturation (S) spécifie le pourcentage de la couleur finale composé de teinte. La composante de luminosité (L) définit le niveau de gris.

/*Syntax*/
color: hsl(XXdeg, XX%, XX%);
color: hsl(XXturn, XX%, XX%);

Application de couleurs aux éléments HTML

En CSS, le Couleur la propriété définit la couleur de premier plan du contenu, et Couleur de l’arrière plan définit la couleur de fond du contenu structuré par HTML. Lorsqu’un élément est rendu, vous pouvez utiliser les propriétés de couleur pour le styler.

Propriété de couleur pour les textes

Les Couleur La propriété est utilisée lors du dessin de texte et lorsque vous avez besoin de tout type de décoration de texte. Vous pouvez utiliser le texte-décoration-couleur propriété pour rendre les soulignements, les surlignages ou les lignes barrées de différentes couleurs. Vous pouvez changer la couleur de fond du texte en utilisant le Couleur de l’arrière plan biens. Vous pouvez appliquer un effet d’ombre sur le texte en utilisant le ombre de texte biens. Vous pouvez sélectionner texte-accent-couleur tout en dessinant des symboles d’emphase dans les champs de texte.

Propriété de couleur pour les boîtes

Comme vous le savez, tout sur une page Web suit le modèle de boîte. Ainsi, chaque élément est une boîte avec une sorte de contenu et une zone de remplissage, de bordure et de marge en option. Vous pouvez utiliser le Couleur de l’arrière plan propriété lorsqu’il n’y a pas de contenu au premier plan. Lorsque vous tracez une ligne afin de séparer les colonnes d’un texte, vous pouvez utiliser le couleur-règle-colonne propriété pour cela. Il y a un contour-couleur propriété pour colorer le contour. Notez qu’un contour est différent de la bordure : il agit comme un indicateur de mise au point.

Propriété de couleur pour les bordures

Tout élément HTML peut avoir une bordure. Vous pouvez définir le couleur de la bordure propriété comme border-top-color, bordure-droite-couleur, border-bottom-color, et bordure-gauche-couleur pour définir la couleur de bordure des côtés correspondants. Cependant, l’utilisation de la propriété abrégée est une bonne pratique.

Les border-inline-start-color La propriété vous permet de colorer les bords de la bordure les plus proches du début. D’autre part, le border-inline-end-color La propriété vous permet de colorer la fin du début des lignes de texte dans une zone. Bien que cela varie en fonction de votre mode d’écriture, orientation-texte, et direction.

Conclusion : couleur et accessibilité

Bien qu’un site Web magnifiquement conçu soit fortement influencé par la couleur utilisée, vous devez toujours vous assurer qu’il est accessible. Une mauvaise utilisation de la couleur peut entraîner une perte de trafic important sur votre site Web.

L’utilisation de notations de chaîne hexadécimales, de noms de couleurs ou de valeurs RVB dépend entièrement de vous. Assurez-vous simplement que vous utilisez des couleurs pour renforcer le texte existant et qu’il suive une hiérarchie visuelle déterminée. En savoir plus sur la théorie des couleurs et créer votre propre palette est une idée exceptionnelle si vous êtes un développeur Web en herbe. D’ici là, codage joyeux et coloré !

A propos de l’auteur