4 façons de définir les couleurs en CSS

Points clés à retenir

• Utilisation des noms de couleurs: CSS fournit 145 noms de couleurs pour une sélection de couleurs facile et conviviale pour les débutants, mais les options sont limitées et peuvent ne pas répondre aux besoins de conception précis.
• Codes couleur hexadécimaux: les codes hexadécimaux offrent une large gamme d'options de couleurs et une personnalisation précise, bien qu'ils puissent être moins intuitifs à utiliser et à mémoriser.
• Valeurs de couleur RVB et RVBA: RVB permet un contrôle précis des couleurs avec des valeurs numériques, tandis que RVBA ajoute de la transparence. Il est important de garantir des combinaisons de couleurs accessibles.

Les couleurs font partie des attributs CSS les plus couramment utilisés, jouant un rôle essentiel dans la définition de l'identité visuelle, de l'ambiance et de l'expérience utilisateur d'un site Web. CSS offre une gamme de choix pour l'utilisation des couleurs, chacun étant adapté aux besoins et préférences de conception spécifiques.

Bien qu'il soit facile de négliger l'importance de la définition des couleurs, vos choix peuvent affecter considérablement l'apparence de votre site Web. Explorer les différences entre les différentes méthodes et comment les appliquer et les combiner pratiquement améliorera votre capacité à créer des sites Web visuellement attrayants.

1. Utiliser des noms de couleurs

CSS fournit un moyen pratique de définir des couleurs à l’aide de noms, et 145 options sont disponibles. Ces noms de couleurs vont du simple « rouge », « vert » et « bleu » à des nuances plus spécifiques comme « corail » ou « lavande ».

L'utilisation de couleurs nommées est simple: vous sélectionnez un nom de couleur comme « rouge » et l'utilisez dans une propriété CSS qui prend en charge les valeurs de couleur. Tel les propriétés incluent l'évidence couleur et Couleur de l'arrière plan, mais aussi couleur de la bordure, couleur du contour, et ombre de texte, entre autres.

Les noms de couleurs sont pratiques lorsque vous avez besoin d’une couleur temporaire pour le prototypage ou que vous souhaitez que votre code reste facile à lire. Voici la syntaxe :

color_property: color_name;

Dans ce cas, remplacez simplement nom_couleur avec la couleur spécifique que vous souhaitez utiliser. Par exemple, si vous souhaitez définir le texte couleur d'un paragraphe à rouge, écrire:

p {
color: red;
}

Cela donnera à vos paragraphes une couleur de texte rouge :

Avantages: Ils sont faciles à lire et à comprendre dans votre code CSS. Ils sont adaptés aux débutants, fonctionnent bien sur tous les navigateurs et sont pratiques pour des idées de conception rapides.

Les inconvénients: Ils ont des options limitées et peuvent ne pas offrir les nuances précises dont vous avez besoin, limitant ainsi la créativité en matière de conception. De plus, ils ne répondent pas toujours à des exigences strictes en matière d’accessibilité et la prise en charge des systèmes plus anciens peut varier.

2. Codes couleur hexadécimaux

Les codes de couleur hexadécimaux, souvent appelés « codes hexadécimaux », sont les méthodes les plus courantes pour spécifier les couleurs dans la conception Web. Ces codes sont constitués de combinaisons de six caractères de chiffres et de lettres (0-9, A-F), représentant le mélange de composants rouge, vert et bleu (RVB) dans une couleur.

Bien qu’ils soient faciles à utiliser, comprendre leur fonctionnement peut s’avérer difficile. Vous pouvez prendre une plongée profonde dans les codes hexadécimaux pour mieux comprendre. Voici un exemple de base de la façon dont vous pouvez utiliser les codes hexadécimaux en CSS :

color: #RRGGBB;

Dans ce format, RR, GG et BB représentent respectivement les composants rouge, vert et bleu. Chaque composant peut aller de 00 (aucune intensité) à FF (intensité maximale). Par exemple, si vous souhaitez définir la couleur d'arrière-plan de l'en-tête d'un site Web sur une nuance de bleu spécifique, vous pouvez utiliser un code hexadécimal comme celui-ci :

header {
background-color: #336699;
}

Cela produira une couleur bleu profond :

​​​​​

Vous pouvez également utiliser un raccourci si chacun des trois composants répète deux fois le même caractère. Vous pouvez écrire l'exemple ci-dessus comme suit :

header {
background-color: #369;
}

Avantages: Les codes couleur hexadécimaux offrent une large gamme d'options de couleurs, vous permettant de générer des nuances détaillées et personnalisées. Ils offrent un contrôle fluide sur les choix de couleurs, ce qui les rend idéaux pour les exigences de conception complexes.

Les inconvénients: Bien que les codes hexadécimaux soient puissants, ils peuvent être moins intuitifs que les couleurs nommées. Vous pouvez également rencontrer le défi de mémoriser des valeurs de couleur spécifiques. Heureusement, outils pour trouver les codes hexadécimaux des couleurs que vous rencontrez sont disponibles, ce qui rend le processus plus gérable.

3. Valeurs de couleur RVB et RVBA

Comme les codes hexadécimaux, ce format vous permet de spécifier les couleurs par leurs composantes rouge, verte et bleue. Cette fois, cependant, vous pouvez utiliser des entiers plus conviviaux.

Valeurs de couleur RVB

Les valeurs de couleur RVB sont la deuxième méthode la plus couramment utilisée pour définir les couleurs en CSS. « RVB » représente le rouge, le vert et le bleu, exprimés sous forme de fonction CSS suivie de parenthèses. Entre parenthèses, vous attribuez des valeurs à chaque canal de couleur, allant de 0 à 255. Cela vous permet de contrôler l'intensité du rouge, du vert et du bleu dans la couleur que vous souhaitez utiliser.

Voici la syntaxe :

rgb(red_value, green_value, blue_value);

Remplacer valeur_rouge, valeur_verte, et valeur_bleue avec leurs valeurs numériques respectives. Par exemple, vous pouvez obtenir des couleurs blanches, noires et rouges comme celles présentées dans cette image :

Lorsque vous définissez les trois canaux de couleur (rouge, vert et bleu) sur leur valeur maximale de 255, vous obtenez l'intensité la plus élevée pour chaque canal, créant ainsi la couleur blanche :

.white-box {
 color: rgb(255, 255, 255);
}

Lorsque vous définissez les trois canaux de couleur sur leur valeur minimale de 0, cela représente l'absence de couleur dans chaque canal, ce qui donne du noir.

.black-box {
color: rgb(0, 0, 0);
}

Régler le canal rouge à sa valeur maximale de 255, tout en gardant les autres canaux à leur valeur minimale de 0, produit la couleur rouge :

.red-box {
color: rgb(255, 0, 0); 
}

Valeurs de couleur RVBA

RGBA fonctionne de la même manière que RGB, la seule différence étant l'inclusion d'une valeur alpha. Le « A » dans RGBA signifie alpha, qui détermine le niveau de transparence ou d'opacité de la couleur choisie. Une valeur de 0 représente une transparence totale, rendant la couleur entièrement invisible, tandis qu'une valeur de 1 représente une opacité totale, rendant la couleur entièrement visible.

RGBA est particulièrement utile lorsque vous souhaitez créer des éléments avec différents niveaux de transparence, tels que des arrière-plans translucides ou du texte estompé. La syntaxe complète est la suivante :

color: rgba(red_value, green_value, blue_value, alpha_value);

Ici, valeur_rouge, valeur_verte, et valeur_bleue représenter les canaux de couleur comme en RVB, et valeur_alpha précise le niveau de transparence.

div {
background-color: rgba(0, 128, 0, 0.5);
}

Dans cet exemple, la valeur alpha de 0,5 attribue 50 % de transparence à la couleur verte, permettant ainsi au contenu situé en dessous de transparaître :

Avantages: RVB et RVBA vous permettent de contrôler les couleurs avec précision, ce qui facilite la sélection de nuances précises et la création de designs visuellement attrayants. Ils sont compatibles avec différents navigateurs Web, garantissant ainsi la cohérence des couleurs que vous avez choisies.

Les inconvénients: Le défi consiste à garantir des combinaisons de couleurs accessibles. Il est crucial de prêter attention aux taux de contraste, principalement lorsque vous travaillez avec de la transparence en RGBA. Les directives WCAG peuvent vous aider vous vous assurez que votre conception est accessible.

4. Valeurs de couleur HSL et HSLA

HSL (abréviation de Hue, Saturation et Lightness) est une autre fonction CSS qui définit les couleurs. Tout comme RVB, HSL utilise des valeurs numériques pour représenter les couleurs, mais il le fait différemment. Vous connaissez peut-être Valeurs HSL des composants d'interface utilisateur dans les applications de conception et ailleurs.

Teinte: Cela représente la couleur elle-même en utilisant des degrés sur une roue chromatique, allant de 0 à 360. Imaginez-le comme la sélection d'un point sur un cercle, où chaque degré correspond à une couleur différente. Par exemple, 0 et 360 degrés pour le rouge, 120 degrés pour le vert et 240 degrés pour le bleu.

Saturation: La saturation détermine la vivacité ou l'intensité de la couleur. Il définit la relation de la couleur avec le gris, 0 % étant complètement en niveaux de gris (désaturé) et 100 % étant entièrement saturé (vibrant et pur).

Légèreté: La luminosité représente la luminosité ou l'obscurité de la couleur. C'est lié à la position de la couleur sur le spectre entre le noir (0%) et le blanc (100%). Une valeur de 50 % représente la couleur normale, tandis que les valeurs inférieures à 50 % assombrissent la couleur et les valeurs supérieures à 50 % l'éclaircissent.

En plus du HSL, il existe le HSLA, où le « A » signifie « alpha ». Ceci est similaire au « A » dans RGBA et signifie transparence.

Voici la syntaxe :

color: hsl(hue_value, saturation_percentage, lightness_percentage);

En utilisant cette syntaxe, remplacez valeur_teinte, saturation_pourcentage, et pourcentage de légèreté avec les valeurs spécifiques souhaitées pour chaque composant. Par exemple:

div {
background-color: hsl(120, 100%, 50%);
}

Dans cet exemple, la couleur d'arrière-plan d'un div L'élément est défini sur un vert vif à l'aide des valeurs HSL. Le 120 représente la teinte (vert), 100 % correspond à une saturation complète et 50 % règle la luminosité à un niveau équilibré.

Avantages: HSL et HSLA offrent des calculs de couleurs polyvalents à l'aide des propriétés personnalisées CSS. Ils sont hautement compatibles avec les navigateurs modernes et permettent des ajustements faciles de la luminosité des couleurs.

Les inconvénients: Apprendre le HSL, c'est comprendre la science des couleurs, comme les teintes et les saturations, qui peuvent être plus difficiles que les couleurs RVB familières.

Adopter la puissance des couleurs CSS

Il existe d'autres méthodes que vous pouvez vérifier, et pendant que vous explorez les différents formats de définition des couleurs en CSS, gardez à l’esprit que vous avez le pouvoir de façonner l’apparence, l’ambiance et l’expérience utilisateur de votre site Web.

Votre choix de format de couleur (qu'il s'agisse de noms de couleurs simples, de codes hexadécimaux, RVB ou HSL) peut avoir un impact sur la façon dont votre public perçoit votre site. Alors expérimentez, apprenez et trouvez les définitions de couleurs qui correspondent le mieux à vos objectifs de conception.