Quand j'étais enfant, j'ai publié un fanzine sur la bande dessinée. C'était bien avant que j'aie un ordinateur : il a été créé à l'aide d'une machine à écrire, de papier et de ciseaux !

Le fanzine était initialement en noir et blanc, photocopié dans mon école. Au fil du temps, à mesure que le succès grandissait, j'ai pu me permettre l'impression offset avec des couvertures couleur !

Cependant, la gestion de ces couleurs était assez difficile. Chaque couverture devait être imprimée quatre fois, une fois pour chaque couleur : cyan, magenta, jaune et clé (noir) – en abrégé CMJN.

Cela signifiait que je devais fournir quatre feuilles distinctes, chacune imprimée à l'encre noire, mais correspondant à une couleur spécifique.

Voici un des numéros que j'ai publié :

Tout le jaune que vous voyez dans l'image ci-dessus a été peint à la main par moi en utilisant de l'encre noire sur la feuille « jaune ». Pour les tons chair, j'ai utilisé quelque chose appelé « points raster ». C'étaient des feuilles que l'on pouvait acheter avec des points noirs de différentes densités. Vous découperiez les points et les appliqueriez – dans ce cas, sur la feuille « rouge ».

J'ai travaillé sur une table lumineuse – une table à dessin avec plateau en verre avec éclairage intégré – pour pouvoir voir à travers les différentes feuilles tout en les alignant correctement.

Cela a pris très beaucoup de temps, mais cela a suscité un intérêt permanent pour la compréhension des couleurs — et pour l'énorme différence entre les couleurs d'impression et celles d'écran !

Bien que le CMJN soit limité à quatre couleurs, il reste relativement facile à comprendre. Nous avons tous utilisé des crayons de couleur sur du papier et avons une idée intuitive de la façon dont les couleurs se mélangent. CMJN est un modèle de couleur soustractif. Vous commencez avec une feuille de papier blanche et, à mesure que vous ajoutez de l’encre, vous soustrayez de la lumière. La combinaison de toutes les couleurs vous amène vers le noir. Si vous n'appliquez aucune encre, le papier reste blanc car il reflète toute la lumière.

Quand j'ai acheté mon premier ordinateur, j'ai dû comprendre le RVB, qui est très différent du CMJN. RVB est un modèle de couleur additif utilisé pour les écrans numériques. Ici, vous mélangez la lumière elle-même : ajouter plus de lumière rend les couleurs plus brillantes et vous rapproche du blanc. Éteignez toutes les lumières RVB (R=0, G=0, B=0) et l'écran devient noir car aucune lumière n'est émise.

En tant que graphiste à l'époque, vous deviez calibrer votre écran car les couleurs que vous voyiez à l'écran et celles que vous voyiez sur papier étaient souvent très différentes !

Visualisation RVB

RVB représente trois sources de lumière : rouge, verte et bleue. Lorsqu'une lumière est éteinte, sa valeur est 0 ; lorsqu'il est complètement allumé, sa valeur est de 255. Lorsque ces lumières se chevauchent, elles créent des couleurs différentes.

Pour mieux comprendre le fonctionnement du RVB, créons un petit outil :

HTML

Styles

Tout d'abord, créons une grille 9 x 8 :

.rgb {
  all: unset;
  aspect-ratio: 9 / 8;
  container-type: inline-size;
  display: grid;
  font-size: 1.75cqi;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
}

C'est une taille inhabituelle, mais c'est parce que nos cercles R, G et B mesurent 5x5 et se chevauchent :

.r, .g, .b {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  font-size: 5cqi;
  mix-blend-mode: difference;
}

Le CSS pour .r, .g et .b est :

.r {
  background-color: rgb(var(--r), 0, 0);
  grid-area: 1 / 3 / 6 / 8;
}

.g {
  background-color: rgb(0, var(--g), 0);
  grid-area: 4 / 1 / 9 / 6;
}

.b {
  background-color: rgb(0, 0, var(--b));
  grid-area: 4 / 5 / 9 / 10;
}

J'ai beaucoup utilisé la zone de grille ces derniers temps. Il vous permet de placer un élément de grille à un emplacement très spécifique :

début de ligne / début de colonne / fin de ligne / fin de colonne

Il est plus facile de visualiser cela si vous activez le le visualiseur de grille :

Avez-vous remarqué les trois propriétés personnalisées CSS, --r, --g et --b ? Nous les mettrons à jour dans un petit extrait JS :

const rgb = document.querySelector('.rgb');
rgb.addEventListener('input', e => {
  const N = e.target;
  document.body.style.setProperty(`--${N.name}`, N.value);
})

Et c’est essentiellement tout. J'ai ajouté quelques éléments

et des ajustements mineurs… mais j'ai presque oublié de mentionner la ligne la plus importante pour faire fonctionner le visualiseur :

mode mix-blend : différence

Lisez-en ici : c'est très amusant de parcourir tous les modes.

Démo

Voici un Codepen. Cliquez et modifiez les chiffres sous R, G et B, et remarquez comment l'arrière-plan de la page et les parties qui se chevauchent des trois cercles changent.