Comprendre le modèle de couleur RVB (RGB)

Introduction

Dans le monde numérique, la couleur est partout. Des photos que vous visualisez sur Instagram au texte que vous lisez actuellement, la couleur joue un rôle vital dans notre expérience numérique. Mais vous êtes-vous déjà demandé comment votre écran affiche ces millions de couleurs ? La réponse réside dans le modèle de couleur RVB (ou RGB en anglais).

Qu'est-ce que le RVB ?

RVB signifie Rouge, Vert et Bleu. C'est un modèle de couleur additif, ce qui signifie qu'il crée des couleurs en additionnant de la lumière. C'est différent de la façon dont nous mélangeons la peinture, qui est un processus soustractif.

Dans le modèle RVB :

• Rouge
• Vert
• Bleu

sont les couleurs primaires de la lumière. En combinant ces trois couleurs à différentes intensités, nous pouvons reproduire un large éventail de couleurs.

Comment ça marche

Imaginez que vous êtes dans une pièce sombre avec trois projecteurs : un rouge, un vert et un bleu.

• Si vous allumez la lumière Rouge, le mur semble rouge.
• Si vous ajoutez la lumière Verte, la zone de chevauchement devient Jaune.
• Si vous ajoutez la lumière Bleue au rouge, la zone de chevauchement devient Magenta.
• Si vous mélangez Vert et Bleu, vous obtenez du Cyan.
• Si vous allumez les trois lumières à pleine intensité, le centre où elles se chevauchent toutes devient Blanc.

C'est pourquoi on l'appelle "additif" — vous commencez avec du noir (pas de lumière) et ajoutez de la lumière pour créer de la couleur.

L'échelle de 0 à 255

En informatique numérique, chacune des trois couleurs (Rouge, Vert, Bleu) est généralement stockée sous forme d'un entier de 8 bits, ce qui lui donne une plage de valeurs possibles de 0 à 255.

• 0 signifie aucune lumière (obscurité).
• 255 signifie intensité maximale.

Ainsi, une couleur est définie par un triplet de nombres comme (R, V, B).

• Noir: (0, 0, 0) –
• Jaune: (255, 255, 0) – Rouge + Vert
• Cyan: (0, 255, 255) – Vert + Bleu
• Magenta: (255, 0, 255) – Rouge + Bleu
• Blanc: (255, 255, 255) – Rouge + Vert + Bleu

Expérimentez avec différentes combinaisons ci-dessous.

RVB vs. CMJN (CMYK)

Vous avez peut-être aussi entendu parler de CMJN (Cyan, Magenta, Jaune, Noir). La principale différence réside dans leur utilisation :

Si vous concevez quelque chose en RVB et l'imprimez, les couleurs peuvent sembler différentes car les écrans émettent de la lumière, tandis que le papier absorbe la lumière.

Utilisation du RVB dans la conception Web

Dans le développement et la conception Web, le RVB est un moyen standard de définir les couleurs. Vous le voyez souvent en CSS :

/* Syntaxe RVB standard */
.my-element {
  background-color: rgb(255, 0, 0); /* Rouge */
  color: rgb(0, 0, 255); /* Texte bleu */
}

/* RVB avec Alpha (Transparence) */
.transparent-box {
  background-color: rgba(0, 255, 0, 0.5); /* Vert semi-transparent */
}

Codes Hexadécimaux

Les codes hexadécimaux (comme #FF5733) ne sont qu'une autre façon de représenter les valeurs RVB.

• Les deux premiers chiffres représentent le Rouge (FF = 255).
• Les deux suivants représentent le Vert (57 = 87).
• Les deux derniers représentent le Bleu (33 = 51).

Conclusion

Le modèle de couleur RVB est la base de la couleur numérique. Comprendre comment la lumière rouge, verte et bleue se mélange pour créer le spectre aide les designers et les développeurs à créer des interfaces visuellement époustouflantes. La prochaine fois que vous regardez un écran, rappelez-vous : tout n'est qu'un mélange de trois lumières simples !