Codage des Couleurs

En informatique, toute information doit être représentée sous forme numérique pour être stockée et traitée par un ordinateur. Les couleurs ne font pas exception.

Objectifs du codage des couleurs :

• Représenter précisément n'importe quelle couleur

• Stocker l'information de manière compacte en mémoire

• Permettre les calculs et transformations sur les couleurs

• Assurer la cohérence d'affichage sur différents appareils

Plusieurs systèmes de codage existent :

• RGB (Red, Green, Blue) : le plus courant pour les écrans

• Hexadécimal : notation compacte du RGB

• HSL (Hue, Saturation, Lightness) : plus intuitif pour les designers

• CMYK (Cyan, Magenta, Yellow, Black) : utilisé pour l'impression

Nous allons explorer les trois premiers systèmes, qui sont les plus utilisés sur le web et en programmation.

Le système RGB est basé sur la synthèse additive des couleurs : toute couleur est créée en mélangeant trois couleurs primaires (rouge, vert, bleu).

Principe de fonctionnement :

• Chaque couleur primaire (canal) a une intensité de 0 à 255 (8 bits)

• 0 = absence de la couleur, 255 = intensité maximale

• Total : 256 × 256 × 256 = 16 777 216 couleurs possibles

Exemples de couleurs RGB :

• rgb(255, 0, 0) = Rouge pur

• rgb(0, 255, 0) = Vert pur

• rgb(0, 0, 255) = Bleu pur

• rgb(255, 255, 0) = Jaune (rouge + vert)

• rgb(255, 0, 255) = Magenta (rouge + bleu)

• rgb(0, 255, 255) = Cyan (vert + bleu)

• rgb(255, 255, 255) = Blanc (toutes les couleurs)

• rgb(0, 0, 0) = Noir (absence de couleur)

• rgb(128, 128, 128) = Gris moyen

En mémoire, une couleur RGB occupe 3 octets (24 bits) :

• 1 octet pour le rouge (0-255)

• 1 octet pour le vert (0-255)

• 1 octet pour le bleu (0-255)

La notation hexadécimale est une façon compacte d'écrire les valeurs RGB. Elle est très utilisée en développement web et en design.

Principe du système hexadécimal :

• Base 16 : utilise les chiffres 0-9 et les lettres A-F

• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A(10), B(11), C(12), D(13), E(14), F(15)

• Deux chiffres hexa représentent un nombre de 0 à 255

• 00 en hexa = 0 en décimal, FF en hexa = 255 en décimal

Format d'une couleur hexadécimale :

• Symbole # suivi de 6 chiffres hexadécimaux

• Format : #RRVVBB (RR = rouge, VV = vert, BB = bleu)

Exemples de conversion RGB ↔ Hexadécimal :

• rgb(255, 0, 0) = #FF0000 (rouge)

• rgb(0, 255, 0) = #00FF00 (vert)

• rgb(0, 0, 255) = #0000FF (bleu)

• rgb(255, 255, 0) = #FFFF00 (jaune)

• rgb(255, 255, 255) = #FFFFFF (blanc)

• rgb(0, 0, 0) = #000000 (noir)

• rgb(128, 128, 128) = #808080 (gris)

Format court (3 chiffres) :

Quand chaque canal a deux chiffres identiques, on peut abréger :

#FF0000 peut s'écrire #F00, #CCCCCC peut s'écrire #CCC

Le modèle HSL offre une manière plus intuitive de décrire les couleurs, plus proche de la perception humaine.

Les trois composantes HSL :

• H (Hue - Teinte) : la couleur pure, de 0° à 360° sur un cercle chromatique

- 0° / 360° = Rouge

- 120° = Vert

- 240° = Bleu

- 60° = Jaune, 180° = Cyan, 300° = Magenta

• S (Saturation) : intensité de la couleur, de 0% à 100%

- 0% = gris (couleur désaturée)

- 100% = couleur pure et vive

• L (Lightness - Luminosité) : clarté de la couleur, de 0% à 100%

- 0% = noir

- 50% = couleur pure

- 100% = blanc

Exemples de couleurs HSL :

• hsl(0, 100%, 50%) = Rouge pur

• hsl(120, 100%, 50%) = Vert pur

• hsl(240, 100%, 50%) = Bleu pur

• hsl(0, 100%, 75%) = Rose clair

• hsl(0, 50%, 50%) = Rouge désaturé

• hsl(0, 0%, 50%) = Gris (pas de saturation)

Avantages du modèle HSL :

• Création de palettes de couleurs harmonieuses

• Ajustement facile de la luminosité ou saturation

• Plus intuitif pour les designers et artistes

En plus des composantes de couleur, on peut ajouter un canal alpha pour gérer la transparence.

Le canal alpha :

• Valeur de 0 (transparent) à 1 (opaque) ou de 0 à 255

• Permet de créer des effets de superposition

• Essentiel pour les interfaces graphiques modernes

Notation avec transparence :

• RGBA : rgba(255, 0, 0, 0.5) = rouge à 50% d'opacité

• HSLA : hsla(0, 100%, 50%, 0.5) = rouge à 50% d'opacité

• Hexadécimal étendu : #FF000080 (les deux derniers chiffres = alpha)

Exemples d'utilisation :

• rgba(0, 0, 0, 0.8) = noir semi-transparent pour un overlay

• rgba(255, 255, 255, 0.3) = blanc semi-transparent pour un effet de verre

En mémoire, RGBA occupe 4 octets (32 bits) au lieu de 3 pour RGB.

Applications pratiques :

• Effets d'ombre portée

• Superposition de calques

• Transitions et animations fluides

• Images PNG avec transparence