CSS - Les couleurs

Noms de couleurs

En CSS, vous pouvez utiliser des noms de couleurs prédéfinis pour spécifier les couleurs. Ces noms sont faciles à retenir et offrent un moyen rapide d'appliquer des couleurs à vos éléments web. Voici quelques noms de couleurs couramment utilisés :

• red : Un rouge vif.
• blue : Un bleu classique.
• green : Un vert naturel.
• yellow : Un jaune ensoleillé.
• purple : Un violet royal.
• black : Un noir solide.
• white : Un blanc pur.

Couleurs hexadécimales

Les valeurs de couleur hexadécimales sont un moyen populaire de représenter les couleurs en CSS. Elles se composent d'un symbole dièse (#) suivi de six caractères, où chaque paire de caractères représente l'intensité des composantes rouge, verte et bleue (RVB).

Le format d'une valeur de couleur hexadécimale est #RRVVBB, où :

• RR représente la composante rouge (00 à FF).
• VV représente la composante verte (00 à FF).
• BB représente la composante bleue (00 à FF).

#FF0000 /* rouge */
#00FF00 /* vert */
#0000FF /* bleu */
#000000 /* noir */
#FFFFFF /* blanc */

Couleurs RVB

Le modèle de couleur RVB est une autre façon de spécifier les couleurs en CSS. Il utilise une combinaison de valeurs rouge, verte et bleue.

Le format d'une valeur de couleur RVB est :

rgb(rouge, vert, bleu)

où chaque composante est un entier entre 0 et 255.

rgb(255, 0, 0)   /* rouge */
rgb(0, 255, 0)   /* vert */
rgb(0, 0 ,255)   /* bleu */
rgb(0 , 0 , 0 )    /* noir */
rgb(255 ,255 ,255 )/* blanc */

Couleurs RVBA

RVBA est une extension du modèle RVB qui inclut un canal alpha pour spécifier l'opacité. La valeur alpha varie de 0 (entièrement transparent) à 1 (entièrement opaque).

Le format d'une valeur de couleur RVBA est :

rgba(rouge, vert, bleu, alpha)

où les trois premières composantes sont des entiers entre 0 et 255, et la valeur alpha varie de 0 à 1.

 rgba(255, 0, 0, .5) /* rouge avec 50% d'opacité */  
 rgba(0, 255, 0, .8) /* vert avec 80% d'opacité */  
 rgba(0, 0, 255, .3) /* bleu avec 30% d'opacité */

Couleurs TSL

Le modèle TSL représente les couleurs en utilisant des valeurs de teinte, saturation et luminosité. Il offre une façon plus intuitive de décrire les couleurs par rapport au RVB.

Le format d'une valeur de couleur TSL est :

hsl(teinte, saturation, luminosité)

où :

• teinte est un angle entre 0 et 360 degrés représentant le cercle chromatique.
• saturation est une valeur en pourcentage entre 0% et 100%, où 0% représente une échelle de gris et 100% représente une saturation complète de la couleur.
• luminosité est une valeur en pourcentage entre 0% et 100%, où 0% représente le noir, 50% représente la couleur normale et 100% représente le blanc.

hsl(0, 100%, 50%) /* rouge */
hsl(120, 100%, 50%) /* vert */
hsl(240, 100%, 50%) /* bleu */
hsl(0, 0%, 0%) /* noir */
hsl(0, 0%, 100%) /* blanc */

Couleurs TSLA

TSLA est une extension du modèle de couleur TSL qui inclut un canal alpha pour spécifier l'opacité, similaire à RVBA.

Le format d'une valeur de couleur TSLA est :

hsla(teinte, saturation, luminosité, alpha)

où les trois premières composantes suivent le même format que TSL, et la valeur alpha est un nombre décimal entre 0 et 1.

 hsla(0, 100%, 50%, .5) /* rouge avec 50% d'opacité */   
 hsla(120, 100%, 50%, .8) /* vert avec 80% d'opacité */   
 hsla(240, 100%, 50%, .3) /* bleu avec 30% d'opacité */

Couleur du texte

La propriété color en CSS définit la couleur du texte dans un élément. Elle accepte toute valeur de couleur valide, comme les noms de couleurs, les couleurs hexadécimales, RGB, RGBA, HSL ou HSLA.

h1 {
  color: blue;
}

p {
  color: #FF0000;
}

span {
  color: rgb(0, 255, 0);
}

• L'élément <h1> aura un texte bleu.
• L'élément <p> aura un texte rouge en utilisant une valeur hexadécimale.
• L'élément <span> aura un texte vert en utilisant une valeur RGB.

Couleur de fond

La propriété background-color définit la couleur de fond d'un élément. Elle accepte les mêmes valeurs que la propriété color.

div {
  background-color: yellow;
}

section {
  background-color: #00FF00;
}

article {
  background-color: rgba(255, 0, 0, 0.5);
}

• L'élément <div> aura un fond jaune.
• L'élément <section> aura un fond vert en utilisant une valeur hexadécimale.
• L'élément <article> aura un fond rouge avec 50% d'opacité en utilisant une valeur RGBA.

Couleur de bordure

La propriété border-color définit la couleur de la bordure d'un élément. Elle accepte les mêmes valeurs que les propriétés color et background-color.

.box {
  border: 2px solid;
  border-color: pink; 
} 

.container { 
  border: 1px dashed; 
  border-color: #0000FF; 
} 

.card { 
  border: 3px dotted;  
  border-color: hsl(240, 100%, 50%);
}

• La classe .box a une bordure rose solide.
• La classe .container a une bordure bleue en pointillés avec des valeurs hexadécimales.
• La classe .card a des bordures bleues en pointillés avec des valeurs HSL.

Opacité

L'opacité contrôle la transparence entre zéro et un, où zéro signifie une transparence totale et un signifie une visibilité totale.

img {
  opacity: 0.5;
} 

.overlay {
  opacity: 0.8;
} 

.faded-text {
  opacity: 0.3;
}

• Les éléments img sont semi-transparents à cinquante pour cent.
• Les classes .overlay apparaissent à quatre-vingts pour cent de visibilité.
• Les classes .faded-text semblent atténuées à trente pour cent.

Schéma de couleurs complémentaires

Les couleurs complémentaires sont opposées l'une à l'autre sur le cercle chromatique. Elles créent un fort contraste et peuvent faire ressortir des éléments. Exemples :

• Rouge et vert
• Bleu et orange
• Violet et jaune

Schéma de couleurs analogues

Les couleurs analogues sont adjacentes sur le cercle chromatique. Elles créent un aspect équilibré. Exemples :

• Rouge, orange et jaune
• Vert, bleu-vert et bleu
• Violet, bleu-violet et bleu

Schéma de couleurs triadiques

Les couleurs triadiques sont espacées uniformément sur le cercle chromatique, formant un triangle. Elles offrent une combinaison vibrante. Exemples :

• Rouge, jaune et bleu
• Vert, orange et violet
• Bleu-vert, magenta et jaune-orange

Lors de la création de combinaisons de couleurs, tenez compte de ces conseils :

• Utilisez un cercle chromatique pour vous aider à sélectionner des couleurs assorties.
• Choisissez une couleur principale avec d'autres comme accents pour l'équilibre.
• Réfléchissez à l'ambiance que vous souhaitez transmettre avec vos choix.
• Testez vos combinaisons sur différents appareils pour la lisibilité.

Utilisez des outils en ligne pour générer des palettes ou explorer différents schémas.

N'oubliez pas que les préférences varient selon les goûts personnels ou le contexte du projet. Expérimentez avec différents schémas pour créer des designs visuellement attrayants.